<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>珠峰架构师成长计划</title>
    <link rel="stylesheet" type="text/css" href="../static/css/main.css">
</head>
<body>
<div class="nav">
    <div class="logo">
        
            珠峰架构师成长计划
        
    </div>
<ul><li><a href="../index.html">0.Async</a></li><li><a href="../html/0.editor.html">0.editor</a></li><li><a href="../html/0.module.html">0.module</a></li><li><a href="../html/1.ES2015.html">1.ES2015</a></li><li><a href="../html/2.Promise.html">2.Promise</a></li><li><a href="../html/3.Node.html">3.Node</a></li><li><a href="../html/4.NodeInstall.html">4.NodeInstall</a></li><li><a href="../html/5.REPL.html">5.REPL</a></li><li><a href="../html/6.NodeCore.html">6.NodeCore</a></li><li><a href="../html/7.module&NPM.html">7.module&NPM</a></li><li><a href="../html/8.Encoding.html">8.Encoding</a></li><li><a href="../html/9.Buffer.html">9.Buffer</a></li><li><a href="../html/10.fs.html">10.fs</a></li><li><a href="../html/11.Stream-1.html">11.Stream-1</a></li><li><a href="../html/11.Stream-2.html">11.Stream-2</a></li><li><a href="../html/11.Stream-3.html">11.Stream-3</a></li><li><a href="../html/11.Stream-4.html">11.Stream-4</a></li><li><a href="../html/12-Network-2.html">12-Network-2</a></li><li><a href="../html/12.NetWork-3.html">12.NetWork-3</a></li><li><a href="../html/12.Network-1.html">12.Network-1</a></li><li><a href="../html/13.tcp.html">13.tcp</a></li><li><a href="../html/14.http-1.html">14.http-1</a></li><li><a href="../html/14.http-2.html">14.http-2</a></li><li><a href="../html/15.compress.html">15.compress</a></li><li><a href="../html/16.crypto.html">16.crypto</a></li><li><a href="../html/17.process.html">17.process</a></li><li><a href="../html/18.yargs.html">18.yargs</a></li><li><a href="../html/19.cache.html">19.cache</a></li><li><a href="../html/20.action.html">20.action</a></li><li><a href="../html/21.https.html">21.https</a></li><li><a href="../html/22.cookie.html">22.cookie</a></li><li><a href="../html/23.session.html">23.session</a></li><li><a href="../html/24.express-1.html">24.express-1</a></li><li><a href="../html/24.express-2.html">24.express-2</a></li><li><a href="../html/24.express-3.html">24.express-3</a></li><li><a href="../html/24.express-4.html">24.express-4</a></li><li><a href="../html/25.koa-1.html">25.koa-1</a></li><li><a href="../html/26.webpack-1-basic.html">26.webpack-1-basic</a></li><li><a href="../html/26.webpack-2-optimize.html">26.webpack-2-optimize</a></li><li><a href="../html/26.webpack-3.tapable.html">26.webpack-3.tapable</a></li><li><a href="../html/26.webpack-4-AST.html">26.webpack-4-AST</a></li><li><a href="../html/26.webpack-5-source.html">26.webpack-5-source</a></li><li class="active"><a href="../html/26.webpack-6-loader.html">26.webpack-6-loader</a></li><li><a href="../html/26.webpack-7-plugin.html">26.webpack-7-plugin</a></li><li><a href="../html/26.webpack-8-hand.html">26.webpack-8-hand</a></li><li><a href="../html/27.react-1.html">27.react-1</a></li><li><a href="../html/27.react-2.html">27.react-2</a></li><li><a href="../html/27.react-3.html">27.react-3</a></li><li><a href="../html/27.react-4-immutable.html">27.react-4-immutable</a></li><li><a href="../html/27.react-5-react-dom-diff.html">27.react-5-react-dom-diff</a></li><li><a href="../html/27.react-6.html">27.react-6</a></li><li><a href="../html/28.react-mobx.html">28.react-mobx</a></li><li><a href="../html/28.redux-0.html">28.redux-0</a></li><li><a href="../html/28.redux-1.html">28.redux-1</a></li><li><a href="../html/28.redux-2-中间件.html">28.redux-2-中间件</a></li><li><a href="../html/28.redux-3-saga.html">28.redux-3-saga</a></li><li><a href="../html/28.redux-jwt-back.html">28.redux-jwt-back</a></li><li><a href="../html/28.redux-jwt-front.html">28.redux-jwt-front</a></li><li><a href="../html/29.mongodb-1.html">29.mongodb-1</a></li><li><a href="../html/29.mongodb-2.html">29.mongodb-2</a></li><li><a href="../html/29.mongodb-3.html">29.mongodb-3</a></li><li><a href="../html/29.mongodb-4.html">29.mongodb-4</a></li><li><a href="../html/29.mongodb-5.html">29.mongodb-5</a></li><li><a href="../html/29.mongodb-6.html">29.mongodb-6</a></li><li><a href="../html/30.cms-1-mysql.html">30.cms-1-mysql</a></li><li><a href="../html/30.cms-2-mysql.html">30.cms-2-mysql</a></li><li><a href="../html/30.cms-3-mysql.html">30.cms-3-mysql</a></li><li><a href="../html/30.cms-4-egg.html">30.cms-4-egg</a></li><li><a href="../html/30.cms-5-api.html">30.cms-5-api</a></li><li><a href="../html/30.cms-6-roadhog.html">30.cms-6-roadhog</a></li><li><a href="../html/30.cms-7-umi.html">30.cms-7-umi</a></li><li><a href="../html/30.cms-8-dva.html">30.cms-8-dva</a></li><li><a href="../html/30.cms-9-dva.html">30.cms-9-dva</a></li><li><a href="../html/30.cms-10-front.html">30.cms-10-front</a></li><li><a href="../html/30.cms-11-deploy.html">30.cms-11-deploy</a></li><li><a href="../html/33.redis.html">33.redis</a></li><li><a href="../html/34.unittest.html">34.unittest</a></li><li><a href="../html/35.jwt.html">35.jwt</a></li><li><a href="../html/36.websocket-1.html">36.websocket-1</a></li><li><a href="../html/36.websocket-2.html">36.websocket-2</a></li><li><a href="../html/38.chat-api-1.html">38.chat-api-1</a></li><li><a href="../html/38.chat-api-2.html">38.chat-api-2</a></li><li><a href="../html/38.chat-3.html">38.chat-3</a></li><li><a href="../html/38.chat-api-3.html">38.chat-api-3</a></li><li><a href="../html/38.chat.html">38.chat</a></li><li><a href="../html/38.chat2.html">38.chat2</a></li><li><a href="../html/38.chat2.html">38.chat2</a></li><li><a href="../html/39.crawl-0.html">39.crawl-0</a></li><li><a href="../html/39.crawl-1.html">39.crawl-1</a></li><li><a href="../html/39.crawl-2.html">39.crawl-2</a></li><li><a href="../html/40.deploy.html">40.deploy</a></li><li><a href="../html/41.safe.html">41.safe</a></li><li><a href="../html/42.test.html">42.test</a></li><li><a href="../html/43.nginx.html">43.nginx</a></li><li><a href="../html/44.enzyme.html">44.enzyme</a></li><li><a href="../html/45.docker.html">45.docker</a></li><li><a href="../html/46.elastic.html">46.elastic</a></li><li><a href="../html/47.oauth.html">47.oauth</a></li><li><a href="../html/48.wxpay.html">48.wxpay</a></li><li><a href="../html/49.nunjucks.html">49.nunjucks</a></li><li><a href="../html/50.ketang.html">50.ketang</a></li><li><a href="../html/index.html">index</a></li><li><a href="../html/51.typescript.html">51.typescript</a></li><li><a href="../html/52.UML.html">52.UML</a></li><li><a href="../html/53.design.html">53.design</a></li><li><a href="../html/index.html">index</a></li><li><a href="../html/54.linux.html">54.linux</a></li><li><a href="../html/55.yaml.html">55.yaml</a></li><li><a href="../html/50.ketang2.html">50.ketang2</a></li><li><a href="../html/56.ts.html">56.ts</a></li><li><a href="../html/57.ts_react.html">57.ts_react</a></li><li><a href="../html/58.react-ssr.html">58.react-ssr</a></li><li><a href="../html/59.react-ssr.html">59.react-ssr</a></li></ul></div>


<div class="warpper">

    <div class="page-toc">
        <ul><li><a href="#t01.loader运行的总体流程">1.loader运行的总体流程</a></li><li><a href="#t12. loader配置">2. loader配置</a><ul><li><a href="#t22.1 匹配(test)单个 loader">2.1 匹配(test)单个 loader</a></li><li><a href="#t32.2 匹配(test)多个 loaders">2.2 匹配(test)多个 loaders</a></li><li><a href="#t42.1 3 npm link">2.1 3 npm link</a></li><li><a href="#t52.1 4 alias">2.1 4 alias</a></li></ul></li><li><a href="#t63. loader用法">3. loader用法</a><ul><li><a href="#t73.1 单个loader用法">3.1 单个loader用法</a></li><li><a href="#t83.2 多个loader">3.2 多个loader</a></li><li><a href="#t93.3 单个loader用法">3.3 单个loader用法</a></li></ul></li><li><a href="#t104 用法准则">4 用法准则</a><ul><li><a href="#t114.1 简单">4.1 简单</a></li><li><a href="#t124.2 链式(Chaining)">4.2 链式(Chaining)</a></li><li><a href="#t134.3 模块化(Modular)">4.3 模块化(Modular)</a></li><li><a href="#t144.4 无状态(Stateless)">4.4 无状态(Stateless)</a></li><li><a href="#t154.5 loader 工具库(Loader Utilities)">4.5 loader 工具库(Loader Utilities)</a></li><li><a href="#t164.6 loader 依赖(Loader Dependencies)">4.6 loader 依赖(Loader Dependencies)</a></li><li><a href="#t174.7 模块依赖(Module Dependencies)">4.7 模块依赖(Module Dependencies)</a></li><li><a href="#t184.8 绝对路径(Absolute Paths)">4.8 绝对路径(Absolute Paths)</a></li><li><a href="#t194.9 同等依赖(Peer Dependencies)">4.9 同等依赖(Peer Dependencies)</a></li></ul></li><li><a href="#t205. API">5. API</a><ul><li><a href="#t215.1  缓存结果">5.1  缓存结果</a></li><li><a href="#t225..2 异步">5..2 异步</a></li><li><a href="#t235.3 raw loader">5.3 raw loader</a></li><li><a href="#t245.4 获得 Loader 的 options">5.4 获得 Loader 的 options</a></li><li><a href="#t255.5  返回其它结果">5.5  返回其它结果</a></li><li><a href="#t265.6  同步与异步">5.6  同步与异步</a><ul><li><a href="#t271.4.7  处理二进制数据">1.4.7  处理二进制数据</a></li></ul></li><li><a href="#t285.8  缓存">5.8  缓存</a></li><li><a href="#t295.9 其它 Loader API">5.9 其它 Loader API</a></li></ul></li><li><a href="#t306.loader实战">6.loader实战</a><ul><li><a href="#t316.1 babel-loader">6.1 babel-loader</a></li><li><a href="#t326.2 BannerLoader">6.2 BannerLoader</a></li><li><a href="#t336.3 pitch">6.3 pitch</a><ul><li><a href="#t346.3.1 log-loader1.js">6.3.1 log-loader1.js</a></li><li><a href="#t356.3.2 log-loader2.js">6.3.2 log-loader2.js</a></li><li><a href="#t366.3.3 log-loader3.js">6.3.3 log-loader3.js</a></li></ul></li><li><a href="#t376.4 css">6.4 css</a><ul><li><a href="#t386.4.1 less-loader.js">6.4.1 less-loader.js</a></li><li><a href="#t396.4.2 style-loader">6.4.2 style-loader</a></li><li><a href="#t406.4.3 css-loader.js">6.4.3 css-loader.js</a></li><li><a href="#t416.4.4 bundle.js">6.4.4 bundle.js</a></li><li><a href="#t426.4.5 exact-loader.js">6.4.5 exact-loader.js</a></li></ul></li><li><a href="#t436.5 file">6.5 file</a><ul><li><a href="#t446.5.1 file-loader">6.5.1 file-loader</a></li><li><a href="#t456.5.2 url-loader">6.5.2 url-loader</a></li></ul></li><li><a href="#t466.6 html-layout-loader">6.6 html-layout-loader</a></li><li><a href="#t476.6.1 webpack.config.js">6.6.1 webpack.config.js</a></li><li><a href="#t486.6.2 html-layout-loader">6.6.2 html-layout-loader</a></li></ul></li><li><a href="#t497.loader测试">7.loader测试</a><ul><li><a href="#t507.1 安装依赖">7.1 安装依赖</a></li><li><a href="#t517.2 src/loader.js">7.2 src/loader.js</a></li><li><a href="#t527.3 test/example.txt">7.3 test/example.txt</a></li><li><a href="#t537.4 test/compile.js">7.4 test/compile.js</a></li><li><a href="#t547.5  test/loader.test.js">7.5  test/loader.test.js</a></li><li><a href="#t557.6  package.json">7.6  package.json</a></li></ul></li><li><a href="#t561. loader源码">1. loader源码</a><ul><li><a href="#t571.1 NormalModuleFactory">1.1 NormalModuleFactory</a></li><li><a href="#t581.2  webpack/lib/NormalModule.js:263">1.2  webpack/lib/NormalModule.js:263</a></li><li><a href="#t591.3  LoaderRunner.js">1.3  LoaderRunner.js</a></li><li><a href="#t601.4 LoaderRunner.js:155">1.4 LoaderRunner.js:155</a></li><li><a href="#t611.5 loadLoader.js:13">1.5 loadLoader.js:13</a></li><li><a href="#t621.6 LoaderRunner.js">1.6 LoaderRunner.js</a></li></ul></li><li><a href="#t63参考">参考</a></li></ul>
    </div>
    
    <div class="content markdown-body">
        <h2 id="t01.loader&#x8FD0;&#x884C;&#x7684;&#x603B;&#x4F53;&#x6D41;&#x7A0B;">1.loader&#x8FD0;&#x884C;&#x7684;&#x603B;&#x4F53;&#x6D41;&#x7A0B; <a href="#t01.loader&#x8FD0;&#x884C;&#x7684;&#x603B;&#x4F53;&#x6D41;&#x7A0B;"> # </a></h2>
<p><img src="http://img.zhufengpeixun.cn/loader.jpg" alt="loader"></p>
<h2 id="t12. loader&#x914D;&#x7F6E;">2. loader&#x914D;&#x7F6E; <a href="#t12. loader&#x914D;&#x7F6E;"> # </a></h2>
<p><code>loader</code>&#x662F;&#x5BFC;&#x51FA;&#x4E3A;&#x4E00;&#x4E2A;&#x51FD;&#x6570;&#x7684;<code>node</code>&#x6A21;&#x5757;&#x3002;&#x8BE5;&#x51FD;&#x6570;&#x5728;<code>loader</code>&#x8F6C;&#x6362;&#x8D44;&#x6E90;&#x7684;&#x65F6;&#x5019;&#x8C03;&#x7528;&#x3002;&#x7ED9;&#x5B9A;&#x7684;&#x51FD;&#x6570;&#x5C06;&#x8C03;&#x7528;<code>loader API</code>&#xFF0C;&#x5E76;&#x901A;&#x8FC7;<code>this</code>&#x4E0A;&#x4E0B;&#x6587;&#x8BBF;&#x95EE;&#x3002;</p>
<h3 id="t22.1 &#x5339;&#x914D;(test)&#x5355;&#x4E2A; loader">2.1 &#x5339;&#x914D;(test)&#x5355;&#x4E2A; loader <a href="#t22.1 &#x5339;&#x914D;(test)&#x5355;&#x4E2A; loader"> # </a></h3>
<p>&#x5339;&#x914D;(test)&#x5355;&#x4E2A; loader&#xFF0C;&#x4F60;&#x53EF;&#x4EE5;&#x7B80;&#x5355;&#x901A;&#x8FC7;&#x5728; rule &#x5BF9;&#x8C61;&#x8BBE;&#x7F6E; path.resolve &#x6307;&#x5411;&#x8FD9;&#x4E2A;&#x672C;&#x5730;&#x6587;&#x4EF6;</p>
<pre><code class="lang-js">{
  <span class="hljs-attr">test</span>: <span class="hljs-regexp">/\.js$/</span>
  use: [
    {
      <span class="hljs-attr">loader</span>: path.resolve(<span class="hljs-string">&apos;path/to/loader.js&apos;</span>),
      <span class="hljs-attr">options</span>: {<span class="hljs-comment">/* ... */</span>}
    }
  ]
}
</code></pre>
<h3 id="t32.2 &#x5339;&#x914D;(test)&#x591A;&#x4E2A; loaders">2.2 &#x5339;&#x914D;(test)&#x591A;&#x4E2A; loaders <a href="#t32.2 &#x5339;&#x914D;(test)&#x591A;&#x4E2A; loaders"> # </a></h3>
<p>&#xFF0C;&#x4F60;&#x53EF;&#x4EE5;&#x4F7F;&#x7528; resolveLoader.modules &#x914D;&#x7F6E;&#xFF0C;webpack &#x5C06;&#x4F1A;&#x4ECE;&#x8FD9;&#x4E9B;&#x76EE;&#x5F55;&#x4E2D;&#x641C;&#x7D22;&#x8FD9;&#x4E9B; loaders&#x3002;</p>
<pre><code class="lang-js">resolveLoader: {
   <span class="hljs-attr">modules</span>: [path.resolve(<span class="hljs-string">&apos;node_modules&apos;</span>), path.resolve(__dirname, <span class="hljs-string">&apos;src&apos;</span>, <span class="hljs-string">&apos;loaders&apos;</span>)]
},
</code></pre>
<h3 id="t42.1 3 npm link">2.1 3 npm link <a href="#t42.1 3 npm link"> # </a></h3>
<ul>
<li>&#x786E;&#x4FDD;&#x6B63;&#x5728;&#x5F00;&#x53D1;&#x7684;&#x672C;&#x5730; Npm &#x6A21;&#x5757;&#xFF08;&#x4E5F;&#x5C31;&#x662F;&#x6B63;&#x5728;&#x5F00;&#x53D1;&#x7684; Loader&#xFF09;&#x7684; package.json &#x5DF2;&#x7ECF;&#x6B63;&#x786E;&#x914D;&#x7F6E;&#x597D;&#xFF1B;
&#x5728;&#x672C;&#x5730; Npm &#x6A21;&#x5757;&#x6839;&#x76EE;&#x5F55;&#x4E0B;&#x6267;&#x884C; npm link&#xFF0C;&#x628A;&#x672C;&#x5730;&#x6A21;&#x5757;&#x6CE8;&#x518C;&#x5230;&#x5168;&#x5C40;&#xFF1B;</li>
<li>&#x5728;&#x9879;&#x76EE;&#x6839;&#x76EE;&#x5F55;&#x4E0B;&#x6267;&#x884C; npm link loader-name&#xFF0C;&#x628A;&#x7B2C;2&#x6B65;&#x6CE8;&#x518C;&#x5230;&#x5168;&#x5C40;&#x7684;&#x672C;&#x5730; Npm &#x6A21;&#x5757;&#x94FE;&#x63A5;&#x5230;&#x9879;&#x76EE;&#x7684; node_moduels &#x4E0B;&#xFF0C;&#x5176;&#x4E2D;&#x7684; - loader-name &#x662F;&#x6307;&#x5728;&#x7B2C;1&#x6B65;&#x4E2D;&#x7684; package.json &#x6587;&#x4EF6;&#x4E2D;&#x914D;&#x7F6E;&#x7684;&#x6A21;&#x5757;&#x540D;&#x79F0;&#x3002;<pre><code class="lang-js">npm link
</code></pre>
</li>
</ul>
<h3 id="t52.1 4 alias">2.1 4 alias <a href="#t52.1 4 alias"> # </a></h3>
<pre><code class="lang-js">resolveLoader: {
        <span class="hljs-attr">alias</span>: {
            <span class="hljs-string">&quot;babel-loader&quot;</span>: resolve(<span class="hljs-string">&apos;./loaders/babel-loader.js&apos;</span>),
            <span class="hljs-string">&quot;css-loader&quot;</span>: resolve(<span class="hljs-string">&apos;./loaders/css-loader.js&apos;</span>),
            <span class="hljs-string">&quot;style-loader&quot;</span>: resolve(<span class="hljs-string">&apos;./loaders/style-loader.js&apos;</span>),
            <span class="hljs-string">&quot;file-loader&quot;</span>: resolve(<span class="hljs-string">&apos;./loaders/file-loader.js&apos;</span>),
            <span class="hljs-string">&quot;url-loader&quot;</span>: resolve(<span class="hljs-string">&apos;./loaders/url-loader.js&apos;</span>)
        }
    },
</code></pre>
<h2 id="t63. loader&#x7528;&#x6CD5;">3. loader&#x7528;&#x6CD5; <a href="#t63. loader&#x7528;&#x6CD5;"> # </a></h2>
<h3 id="t73.1 &#x5355;&#x4E2A;loader&#x7528;&#x6CD5;">3.1 &#x5355;&#x4E2A;loader&#x7528;&#x6CD5; <a href="#t73.1 &#x5355;&#x4E2A;loader&#x7528;&#x6CD5;"> # </a></h3>
<ul>
<li>&#x5F53;&#x4E00;&#x4E2A; loader &#x5728;&#x8D44;&#x6E90;&#x4E2D;&#x4F7F;&#x7528;&#xFF0C;&#x8FD9;&#x4E2A; loader &#x53EA;&#x80FD;&#x4F20;&#x5165;&#x4E00;&#x4E2A;&#x53C2;&#x6570; - &#x8FD9;&#x4E2A;&#x53C2;&#x6570;&#x662F;&#x4E00;&#x4E2A;&#x5305;&#x542B;&#x5305;&#x542B;&#x8D44;&#x6E90;&#x6587;&#x4EF6;&#x5185;&#x5BB9;&#x7684;&#x5B57;&#x7B26;&#x4E32;</li>
<li>&#x540C;&#x6B65; loader &#x53EF;&#x4EE5;&#x7B80;&#x5355;&#x7684;&#x8FD4;&#x56DE;&#x4E00;&#x4E2A;&#x4EE3;&#x8868;&#x6A21;&#x5757;&#x8F6C;&#x5316;&#x540E;&#x7684;&#x503C;&#x3002;</li>
<li><p>&#x5728;&#x66F4;&#x590D;&#x6742;&#x7684;&#x60C5;&#x51B5;&#x4E0B;&#xFF0C;loader &#x4E5F;&#x53EF;&#x4EE5;&#x901A;&#x8FC7;&#x4F7F;&#x7528; this.callback(err, values...) &#x51FD;&#x6570;&#xFF0C;&#x8FD4;&#x56DE;&#x4EFB;&#x610F;&#x6570;&#x91CF;&#x7684;&#x503C;&#x3002;&#x9519;&#x8BEF;&#x8981;&#x4E48;&#x4F20;&#x9012;&#x7ED9;&#x8FD9;&#x4E2A; this.callback &#x51FD;&#x6570;&#xFF0C;&#x8981;&#x4E48;&#x6254;&#x8FDB;&#x540C;&#x6B65; loader &#x4E2D;&#x3002;</p>
</li>
<li><p>loader&#x53EA;&#x80FD;&#x4F20;&#x5165;&#x4E00;&#x4E2A;&#x5305;&#x542B;&#x5305;&#x542B;&#x8D44;&#x6E90;&#x6587;&#x4EF6;&#x5185;&#x5BB9;&#x7684;&#x5B57;&#x7B26;&#x4E32;</p>
</li>
<li>&#x540C;&#x6B65; loader &#x53EF;&#x4EE5;&#x7B80;&#x5355;&#x7684;&#x8FD4;&#x56DE;&#x4E00;&#x4E2A;&#x4EE3;&#x8868;&#x6A21;&#x5757;&#x8F6C;&#x5316;&#x540E;&#x7684;&#x503C;</li>
<li>loader &#x4E5F;&#x53EF;&#x4EE5;&#x901A;&#x8FC7;&#x4F7F;&#x7528; this.callback(err, values...) &#x51FD;&#x6570;&#xFF0C;&#x8FD4;&#x56DE;&#x4EFB;&#x610F;&#x6570;&#x91CF;&#x7684;&#x503C;</li>
<li>loader &#x4F1A;&#x8FD4;&#x56DE;&#x4E00;&#x4E2A;&#x6216;&#x8005;&#x4E24;&#x4E2A;&#x503C;&#x3002;&#x7B2C;&#x4E00;&#x4E2A;&#x503C;&#x7684;&#x7C7B;&#x578B;&#x662F; JavaScript &#x4EE3;&#x7801;&#x7684;&#x5B57;&#x7B26;&#x4E32;&#x6216;&#x8005; buffer&#x3002;&#x7B2C;&#x4E8C;&#x4E2A;&#x53C2;&#x6570;&#x503C;&#x662F; SourceMap&#xFF0C;&#x5B83;&#x662F;&#x4E2A; JavaScript &#x5BF9;&#x8C61;</li>
</ul>
<h3 id="t83.2 &#x591A;&#x4E2A;loader">3.2 &#x591A;&#x4E2A;loader <a href="#t83.2 &#x591A;&#x4E2A;loader"> # </a></h3>
<p>&#x5F53;&#x94FE;&#x5F0F;&#x8C03;&#x7528;&#x591A;&#x4E2A; loader &#x7684;&#x65F6;&#x5019;&#xFF0C;&#x8BF7;&#x8BB0;&#x4F4F;&#x5B83;&#x4EEC;&#x4F1A;&#x4EE5;&#x76F8;&#x53CD;&#x7684;&#x987A;&#x5E8F;&#x6267;&#x884C;&#x3002;&#x53D6;&#x51B3;&#x4E8E;&#x6570;&#x7EC4;&#x5199;&#x6CD5;&#x683C;&#x5F0F;&#xFF0C;&#x4ECE;&#x53F3;&#x5411;&#x5DE6;&#x6216;&#x8005;&#x4ECE;&#x4E0B;&#x5411;&#x4E0A;&#x6267;&#x884C;&#x3002;</p>
<ul>
<li>&#x6700;&#x540E;&#x7684; loader &#x6700;&#x65E9;&#x8C03;&#x7528;&#xFF0C;&#x5C06;&#x4F1A;&#x4F20;&#x5165;&#x539F;&#x59CB;&#x8D44;&#x6E90;&#x5185;&#x5BB9;&#x3002;</li>
<li>&#x7B2C;&#x4E00;&#x4E2A; loader &#x6700;&#x540E;&#x8C03;&#x7528;&#xFF0C;&#x671F;&#x671B;&#x503C;&#x662F;&#x4F20;&#x51FA; JavaScript &#x548C; source map&#xFF08;&#x53EF;&#x9009;&#xFF09;&#x3002;</li>
<li>&#x4E2D;&#x95F4;&#x7684; loader &#x6267;&#x884C;&#x65F6;&#xFF0C;&#x4F1A;&#x4F20;&#x5165;&#x524D;&#x4E00;&#x4E2A; loader &#x4F20;&#x51FA;&#x7684;&#x7ED3;&#x679C;&#x3002;</li>
</ul>
<h3 id="t93.3 &#x5355;&#x4E2A;loader&#x7528;&#x6CD5;">3.3 &#x5355;&#x4E2A;loader&#x7528;&#x6CD5; <a href="#t93.3 &#x5355;&#x4E2A;loader&#x7528;&#x6CD5;"> # </a></h3>
<ul>
<li>&#x6700;&#x540E;&#x7684; loader &#x6700;&#x65E9;&#x8C03;&#x7528;&#xFF0C;&#x5C06;&#x4F1A;&#x4F20;&#x5165;&#x539F;&#x59CB;&#x8D44;&#x6E90;&#x5185;&#x5BB9;&#x3002;</li>
<li>&#x7B2C;&#x4E00;&#x4E2A; loader &#x6700;&#x540E;&#x8C03;&#x7528;&#xFF0C;&#x671F;&#x671B;&#x503C;&#x662F;&#x4F20;&#x51FA; JavaScript &#x548C; source map&#xFF08;&#x53EF;&#x9009;&#xFF09;&#x3002;</li>
<li>&#x4E2D;&#x95F4;&#x7684; loader &#x6267;&#x884C;&#x65F6;&#xFF0C;&#x4F1A;&#x4F20;&#x5165;&#x524D;&#x4E00;&#x4E2A; loader &#x4F20;&#x51FA;&#x7684;&#x7ED3;&#x679C;&#x3002;</li>
</ul>
<h2 id="t104 &#x7528;&#x6CD5;&#x51C6;&#x5219;">4 &#x7528;&#x6CD5;&#x51C6;&#x5219; <a href="#t104 &#x7528;&#x6CD5;&#x51C6;&#x5219;"> # </a></h2>
<h3 id="t114.1 &#x7B80;&#x5355;">4.1 &#x7B80;&#x5355; <a href="#t114.1 &#x7B80;&#x5355;"> # </a></h3>
<ul>
<li>loaders &#x5E94;&#x8BE5;&#x53EA;&#x505A;&#x5355;&#x4E00;&#x4EFB;&#x52A1;&#x3002;&#x8FD9;&#x4E0D;&#x4EC5;&#x4F7F;&#x6BCF;&#x4E2A; loader &#x6613;&#x7EF4;&#x62A4;&#xFF0C;&#x4E5F;&#x53EF;&#x4EE5;&#x5728;&#x66F4;&#x591A;&#x573A;&#x666F;&#x94FE;&#x5F0F;&#x8C03;&#x7528;&#x3002;</li>
</ul>
<h3 id="t124.2 &#x94FE;&#x5F0F;(Chaining)">4.2 &#x94FE;&#x5F0F;(Chaining) <a href="#t124.2 &#x94FE;&#x5F0F;(Chaining)"> # </a></h3>
<ul>
<li>&#x5229;&#x7528; loader &#x53EF;&#x4EE5;&#x94FE;&#x5F0F;&#x8C03;&#x7528;&#x7684;&#x4F18;&#x52BF;&#x3002;&#x5199;&#x4E94;&#x4E2A;&#x7B80;&#x5355;&#x7684; loader &#x5B9E;&#x73B0;&#x4E94;&#x9879;&#x4EFB;&#x52A1;&#xFF0C;&#x800C;&#x4E0D;&#x662F;&#x4E00;&#x4E2A; loader &#x5B9E;&#x73B0;&#x4E94;&#x9879;&#x4EFB;&#x52A1;</li>
</ul>
<h3 id="t134.3 &#x6A21;&#x5757;&#x5316;(Modular)">4.3 &#x6A21;&#x5757;&#x5316;(Modular) <a href="#t134.3 &#x6A21;&#x5757;&#x5316;(Modular)"> # </a></h3>
<p>&#x4FDD;&#x8BC1;&#x8F93;&#x51FA;&#x6A21;&#x5757;&#x5316;&#x3002;loader &#x751F;&#x6210;&#x7684;&#x6A21;&#x5757;&#x4E0E;&#x666E;&#x901A;&#x6A21;&#x5757;&#x9075;&#x5FAA;&#x76F8;&#x540C;&#x7684;&#x8BBE;&#x8BA1;&#x539F;&#x5219;&#x3002;</p>
<h3 id="t144.4 &#x65E0;&#x72B6;&#x6001;(Stateless)">4.4 &#x65E0;&#x72B6;&#x6001;(Stateless) <a href="#t144.4 &#x65E0;&#x72B6;&#x6001;(Stateless)"> # </a></h3>
<p>&#x786E;&#x4FDD; loader &#x5728;&#x4E0D;&#x540C;&#x6A21;&#x5757;&#x8F6C;&#x6362;&#x4E4B;&#x95F4;&#x4E0D;&#x4FDD;&#x5B58;&#x72B6;&#x6001;&#x3002;&#x6BCF;&#x6B21;&#x8FD0;&#x884C;&#x90FD;&#x5E94;&#x8BE5;&#x72EC;&#x7ACB;&#x4E8E;&#x5176;&#x4ED6;&#x7F16;&#x8BD1;&#x6A21;&#x5757;&#x4EE5;&#x53CA;&#x76F8;&#x540C;&#x6A21;&#x5757;&#x4E4B;&#x524D;&#x7684;&#x7F16;&#x8BD1;&#x7ED3;&#x679C;&#x3002;</p>
<h3 id="t154.5 loader &#x5DE5;&#x5177;&#x5E93;(Loader Utilities)">4.5 loader &#x5DE5;&#x5177;&#x5E93;(Loader Utilities) <a href="#t154.5 loader &#x5DE5;&#x5177;&#x5E93;(Loader Utilities)"> # </a></h3>
<ul>
<li><p><a href="https://github.com/webpack/loader-utils">loader-utils</a> &#x5305;&#x3002;&#x5B83;&#x63D0;&#x4F9B;&#x4E86;&#x8BB8;&#x591A;&#x6709;&#x7528;&#x7684;&#x5DE5;&#x5177;&#xFF0C;&#x4F46;&#x6700;&#x5E38;&#x7528;&#x7684;&#x4E00;&#x79CD;&#x5DE5;&#x5177;&#x662F;&#x83B7;&#x53D6;&#x4F20;&#x9012;&#x7ED9; loader &#x7684;&#x9009;&#x9879;</p>
</li>
<li><p><a href="https://github.com/webpack-contrib/schema-utils">schema-utils</a> &#x5305;&#x914D;&#x5408; loader-utils&#xFF0C;&#x7528;&#x4E8E;&#x4FDD;&#x8BC1; loader &#x9009;&#x9879;&#xFF0C;&#x8FDB;&#x884C;&#x4E0E; JSON Schema &#x7ED3;&#x6784;&#x4E00;&#x81F4;&#x7684;&#x6821;&#x9A8C;</p>
</li>
</ul>
<h3 id="t164.6 loader &#x4F9D;&#x8D56;(Loader Dependencies)">4.6 loader &#x4F9D;&#x8D56;(Loader Dependencies) <a href="#t164.6 loader &#x4F9D;&#x8D56;(Loader Dependencies)"> # </a></h3>
<p>&#x5982;&#x679C;&#x4E00;&#x4E2A; loader &#x4F7F;&#x7528;&#x5916;&#x90E8;&#x8D44;&#x6E90;&#xFF08;&#x4F8B;&#x5982;&#xFF0C;&#x4ECE;&#x6587;&#x4EF6;&#x7CFB;&#x7EDF;&#x8BFB;&#x53D6;&#xFF09;&#xFF0C;&#x5FC5;&#x987B;&#x58F0;&#x660E;&#x5B83;&#x3002;&#x8FD9;&#x4E9B;&#x4FE1;&#x606F;&#x7528;&#x4E8E;&#x4F7F;&#x7F13;&#x5B58; loaders &#x65E0;&#x6548;&#xFF0C;&#x4EE5;&#x53CA;&#x5728;&#x89C2;&#x5BDF;&#x6A21;&#x5F0F;(watch mode)&#x4E0B;&#x91CD;&#x7F16;&#x8BD1;&#x3002;</p>
<h3 id="t174.7 &#x6A21;&#x5757;&#x4F9D;&#x8D56;(Module Dependencies)">4.7 &#x6A21;&#x5757;&#x4F9D;&#x8D56;(Module Dependencies) <a href="#t174.7 &#x6A21;&#x5757;&#x4F9D;&#x8D56;(Module Dependencies)"> # </a></h3>
<p>&#x6839;&#x636E;&#x6A21;&#x5757;&#x7C7B;&#x578B;&#xFF0C;&#x53EF;&#x80FD;&#x4F1A;&#x6709;&#x4E0D;&#x540C;&#x7684;&#x6A21;&#x5F0F;&#x6307;&#x5B9A;&#x4F9D;&#x8D56;&#x5173;&#x7CFB;&#x3002;&#x4F8B;&#x5982;&#x5728; CSS &#x4E2D;&#xFF0C;&#x4F7F;&#x7528; @import &#x548C; url(...) &#x8BED;&#x53E5;&#x6765;&#x58F0;&#x660E;&#x4F9D;&#x8D56;&#x3002;&#x8FD9;&#x4E9B;&#x4F9D;&#x8D56;&#x5173;&#x7CFB;&#x5E94;&#x8BE5;&#x7531;&#x6A21;&#x5757;&#x7CFB;&#x7EDF;&#x89E3;&#x6790;&#x3002;</p>
<h3 id="t184.8 &#x7EDD;&#x5BF9;&#x8DEF;&#x5F84;(Absolute Paths)">4.8 &#x7EDD;&#x5BF9;&#x8DEF;&#x5F84;(Absolute Paths) <a href="#t184.8 &#x7EDD;&#x5BF9;&#x8DEF;&#x5F84;(Absolute Paths)"> # </a></h3>
<p>&#x4E0D;&#x8981;&#x5728;&#x6A21;&#x5757;&#x4EE3;&#x7801;&#x4E2D;&#x63D2;&#x5165;&#x7EDD;&#x5BF9;&#x8DEF;&#x5F84;&#xFF0C;&#x56E0;&#x4E3A;&#x5F53;&#x9879;&#x76EE;&#x6839;&#x8DEF;&#x5F84;&#x53D8;&#x5316;&#x65F6;&#xFF0C;&#x6587;&#x4EF6;&#x7EDD;&#x5BF9;&#x8DEF;&#x5F84;&#x4E5F;&#x4F1A;&#x53D8;&#x5316;&#x3002;<code>loader-utils</code> &#x4E2D;&#x7684; <code>stringifyRequest</code> &#x65B9;&#x6CD5;&#xFF0C;&#x53EF;&#x4EE5;&#x5C06;&#x7EDD;&#x5BF9;&#x8DEF;&#x5F84;&#x8F6C;&#x5316;&#x4E3A;&#x76F8;&#x5BF9;&#x8DEF;&#x5F84;&#x3002;</p>
<h3 id="t194.9 &#x540C;&#x7B49;&#x4F9D;&#x8D56;(Peer Dependencies)">4.9 &#x540C;&#x7B49;&#x4F9D;&#x8D56;(Peer Dependencies) <a href="#t194.9 &#x540C;&#x7B49;&#x4F9D;&#x8D56;(Peer Dependencies)"> # </a></h3>
<ul>
<li>&#x5982;&#x679C;&#x4F60;&#x7684; loader &#x7B80;&#x5355;&#x5305;&#x88F9;&#x53E6;&#x5916;&#x4E00;&#x4E2A;&#x5305;&#xFF0C;&#x4F60;&#x5E94;&#x8BE5;&#x628A;&#x8FD9;&#x4E2A;&#x5305;&#x4F5C;&#x4E3A;&#x4E00;&#x4E2A; peerDependency &#x5F15;&#x5165;&#x3002;</li>
<li>&#x8FD9;&#x79CD;&#x65B9;&#x5F0F;&#x5141;&#x8BB8;&#x5E94;&#x7528;&#x7A0B;&#x5E8F;&#x5F00;&#x53D1;&#x8005;&#x5728;&#x5FC5;&#x8981;&#x60C5;&#x51B5;&#x4E0B;&#xFF0C;&#x5728; package.json &#x4E2D;&#x6307;&#x5B9A;&#x6240;&#x9700;&#x7684;&#x786E;&#x5B9A;&#x7248;&#x672C;&#x3002;</li>
</ul>
<h2 id="t205. API">5. API <a href="#t205. API"> # </a></h2>
<h3 id="t215.1  &#x7F13;&#x5B58;&#x7ED3;&#x679C;">5.1  &#x7F13;&#x5B58;&#x7ED3;&#x679C; <a href="#t215.1  &#x7F13;&#x5B58;&#x7ED3;&#x679C;"> # </a></h3>
<p>webpack&#x5145;&#x5206;&#x5730;&#x5229;&#x7528;&#x7F13;&#x5B58;&#x6765;&#x63D0;&#x9AD8;&#x7F16;&#x8BD1;&#x6548;&#x7387;</p>
<pre><code class="lang-js"> <span class="hljs-keyword">this</span>.cacheable();
</code></pre>
<h3 id="t225..2 &#x5F02;&#x6B65;">5..2 &#x5F02;&#x6B65; <a href="#t225..2 &#x5F02;&#x6B65;"> # </a></h3>
<p>&#x5F53;&#x4E00;&#x4E2A; Loader &#x65E0;&#x4F9D;&#x8D56;&#xFF0C;&#x53EF;&#x5F02;&#x6B65;&#x7684;&#x65F6;&#x5019;&#x6211;&#x60F3;&#x90FD;&#x5E94;&#x8BE5;&#x8BA9;&#x5B83;&#x4E0D;&#x518D;&#x963B;&#x585E;&#x5730;&#x53BB;&#x5F02;&#x6B65;</p>
<pre><code class="lang-js"><span class="hljs-comment">// &#x8BA9; Loader &#x7F13;&#x5B58;</span>
<span class="hljs-built_in">module</span>.exports = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">source</span>) </span>{
    <span class="hljs-keyword">var</span> callback = <span class="hljs-keyword">this</span>.async();
    <span class="hljs-comment">// &#x505A;&#x5F02;&#x6B65;&#x7684;&#x4E8B;</span>
    doSomeAsyncOperation(content, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">err, result</span>) </span>{
        <span class="hljs-keyword">if</span>(err) <span class="hljs-keyword">return</span> callback(err);
        callback(<span class="hljs-literal">null</span>, result);
    });
};
</code></pre>
<h3 id="t235.3 raw loader">5.3 raw loader <a href="#t235.3 raw loader"> # </a></h3>
<p>&#x9ED8;&#x8BA4;&#x7684;&#x60C5;&#x51B5;&#x6E90;&#x6587;&#x4EF6;&#x662F;&#x4EE5; <code>UTF-8</code> &#x5B57;&#x7B26;&#x4E32;&#x7684;&#x5F62;&#x5F0F;&#x4F20;&#x5165;&#x7ED9; Loader,&#x8BBE;&#x7F6E;<code>module.exports.raw = true</code>&#x53EF;&#x4F7F;&#x7528; buffer &#x7684;&#x5F62;&#x5F0F;&#x8FDB;&#x884C;&#x5904;&#x7406;</p>
<pre><code class="lang-js"><span class="hljs-built_in">module</span>.exports.raw = <span class="hljs-literal">true</span>;
</code></pre>
<h3 id="t245.4 &#x83B7;&#x5F97; Loader &#x7684; options">5.4 &#x83B7;&#x5F97; Loader &#x7684; options <a href="#t245.4 &#x83B7;&#x5F97; Loader &#x7684; options"> # </a></h3>
<pre><code class="lang-js"><span class="hljs-keyword">const</span> loaderUtils = <span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;loader-utils&apos;</span>);
<span class="hljs-built_in">module</span>.exports = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">source</span>) </span>{
  <span class="hljs-comment">// &#x83B7;&#x53D6;&#x5230;&#x7528;&#x6237;&#x7ED9;&#x5F53;&#x524D; Loader &#x4F20;&#x5165;&#x7684; options</span>
  <span class="hljs-keyword">const</span> options = loaderUtils.getOptions(<span class="hljs-keyword">this</span>);
  <span class="hljs-keyword">return</span> source;
};
</code></pre>
<h3 id="t255.5  &#x8FD4;&#x56DE;&#x5176;&#x5B83;&#x7ED3;&#x679C;">5.5  &#x8FD4;&#x56DE;&#x5176;&#x5B83;&#x7ED3;&#x679C; <a href="#t255.5  &#x8FD4;&#x56DE;&#x5176;&#x5B83;&#x7ED3;&#x679C;"> # </a></h3>
<p>Loader&#x6709;&#x4E9B;&#x573A;&#x666F;&#x4E0B;&#x8FD8;&#x9700;&#x8981;&#x8FD4;&#x56DE;&#x9664;&#x4E86;&#x5185;&#x5BB9;&#x4E4B;&#x5916;&#x7684;&#x4E1C;&#x897F;&#x3002;</p>
<pre><code class="lang-js"><span class="hljs-built_in">module</span>.exports = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">source</span>) </span>{
  <span class="hljs-comment">// &#x901A;&#x8FC7; this.callback &#x544A;&#x8BC9; Webpack &#x8FD4;&#x56DE;&#x7684;&#x7ED3;&#x679C;</span>
  <span class="hljs-keyword">this</span>.callback(<span class="hljs-literal">null</span>, source, sourceMaps);
  <span class="hljs-comment">// &#x5F53;&#x4F60;&#x4F7F;&#x7528; this.callback &#x8FD4;&#x56DE;&#x5185;&#x5BB9;&#x65F6;&#xFF0C;&#x8BE5; Loader &#x5FC5;&#x987B;&#x8FD4;&#x56DE; undefined&#xFF0C;</span>
  <span class="hljs-comment">// &#x4EE5;&#x8BA9; Webpack &#x77E5;&#x9053;&#x8BE5; Loader &#x8FD4;&#x56DE;&#x7684;&#x7ED3;&#x679C;&#x5728; this.callback &#x4E2D;&#xFF0C;&#x800C;&#x4E0D;&#x662F; return &#x4E2D; </span>
  <span class="hljs-keyword">return</span>;
};
</code></pre>
<p>&#x5B8C;&#x6574;&#x683C;&#x5F0F;</p>
<pre><code class="lang-js"><span class="hljs-keyword">this</span>.callback(
    <span class="hljs-comment">// &#x5F53;&#x65E0;&#x6CD5;&#x8F6C;&#x6362;&#x539F;&#x5185;&#x5BB9;&#x65F6;&#xFF0C;&#x7ED9; Webpack &#x8FD4;&#x56DE;&#x4E00;&#x4E2A; Error</span>
    err: <span class="hljs-built_in">Error</span> | <span class="hljs-literal">null</span>,
    <span class="hljs-comment">// &#x539F;&#x5185;&#x5BB9;&#x8F6C;&#x6362;&#x540E;&#x7684;&#x5185;&#x5BB9;</span>
    content: string | Buffer,
    <span class="hljs-comment">// &#x7528;&#x4E8E;&#x628A;&#x8F6C;&#x6362;&#x540E;&#x7684;&#x5185;&#x5BB9;&#x5F97;&#x51FA;&#x539F;&#x5185;&#x5BB9;&#x7684; Source Map&#xFF0C;&#x65B9;&#x4FBF;&#x8C03;&#x8BD5;</span>
    sourceMap?: SourceMap,
    <span class="hljs-comment">// &#x5982;&#x679C;&#x672C;&#x6B21;&#x8F6C;&#x6362;&#x4E3A;&#x539F;&#x5185;&#x5BB9;&#x751F;&#x6210;&#x4E86; AST &#x8BED;&#x6CD5;&#x6811;&#xFF0C;&#x53EF;&#x4EE5;&#x628A;&#x8FD9;&#x4E2A; AST &#x8FD4;&#x56DE;&#xFF0C;</span>
    <span class="hljs-comment">// &#x4EE5;&#x65B9;&#x4FBF;&#x4E4B;&#x540E;&#x9700;&#x8981; AST &#x7684; Loader &#x590D;&#x7528;&#x8BE5; AST&#xFF0C;&#x4EE5;&#x907F;&#x514D;&#x91CD;&#x590D;&#x751F;&#x6210; AST&#xFF0C;&#x63D0;&#x5347;&#x6027;&#x80FD;</span>
    abstractSyntaxTree?: AST
);
</code></pre>
<h3 id="t265.6  &#x540C;&#x6B65;&#x4E0E;&#x5F02;&#x6B65;">5.6  &#x540C;&#x6B65;&#x4E0E;&#x5F02;&#x6B65; <a href="#t265.6  &#x540C;&#x6B65;&#x4E0E;&#x5F02;&#x6B65;"> # </a></h3>
<p>Loader &#x6709;&#x540C;&#x6B65;&#x548C;&#x5F02;&#x6B65;&#x4E4B;&#x5206;&#xFF0C;&#x4E0A;&#x9762;&#x4ECB;&#x7ECD;&#x7684; Loader &#x90FD;&#x662F;&#x540C;&#x6B65;&#x7684; Loader&#xFF0C;&#x56E0;&#x4E3A;&#x5B83;&#x4EEC;&#x7684;&#x8F6C;&#x6362;&#x6D41;&#x7A0B;&#x90FD;&#x662F;&#x540C;&#x6B65;&#x7684;&#xFF0C;&#x8F6C;&#x6362;&#x5B8C;&#x6210;&#x540E;&#x518D;&#x8FD4;&#x56DE;&#x7ED3;&#x679C;&#x3002;
&#x4F46;&#x5728;&#x6709;&#x4E9B;&#x573A;&#x666F;&#x4E0B;&#x8F6C;&#x6362;&#x7684;&#x6B65;&#x9AA4;&#x53EA;&#x80FD;&#x662F;&#x5F02;&#x6B65;&#x5B8C;&#x6210;&#x7684;&#xFF0C;&#x4F8B;&#x5982;&#x4F60;&#x9700;&#x8981;&#x901A;&#x8FC7;&#x7F51;&#x7EDC;&#x8BF7;&#x6C42;&#x624D;&#x80FD;&#x5F97;&#x51FA;&#x7ED3;&#x679C;&#xFF0C;&#x5982;&#x679C;&#x91C7;&#x7528;&#x540C;&#x6B65;&#x7684;&#x65B9;&#x5F0F;&#x7F51;&#x7EDC;&#x8BF7;&#x6C42;&#x5C31;&#x4F1A;&#x963B;&#x585E;&#x6574;&#x4E2A;&#x6784;&#x5EFA;&#xFF0C;&#x5BFC;&#x81F4;&#x6784;&#x5EFA;&#x975E;&#x5E38;&#x7F13;&#x6162;&#x3002;</p>
<pre><code class="lang-js"><span class="hljs-built_in">module</span>.exports = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">source</span>) </span>{
    <span class="hljs-comment">// &#x544A;&#x8BC9; Webpack &#x672C;&#x6B21;&#x8F6C;&#x6362;&#x662F;&#x5F02;&#x6B65;&#x7684;&#xFF0C;Loader &#x4F1A;&#x5728; callback &#x4E2D;&#x56DE;&#x8C03;&#x7ED3;&#x679C;</span>
    <span class="hljs-keyword">var</span> callback = <span class="hljs-keyword">this</span>.async();
    someAsyncOperation(source, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">err, result, sourceMaps, ast</span>) </span>{
        <span class="hljs-comment">// &#x901A;&#x8FC7; callback &#x8FD4;&#x56DE;&#x5F02;&#x6B65;&#x6267;&#x884C;&#x540E;&#x7684;&#x7ED3;&#x679C;</span>
        callback(err, result, sourceMaps, ast);
    });
};
</code></pre>
<h4 id="t271.4.7  &#x5904;&#x7406;&#x4E8C;&#x8FDB;&#x5236;&#x6570;&#x636E;">1.4.7  &#x5904;&#x7406;&#x4E8C;&#x8FDB;&#x5236;&#x6570;&#x636E; <a href="#t271.4.7  &#x5904;&#x7406;&#x4E8C;&#x8FDB;&#x5236;&#x6570;&#x636E;"> # </a></h4>
<p>&#x5728;&#x9ED8;&#x8BA4;&#x7684;&#x60C5;&#x51B5;&#x4E0B;&#xFF0C;Webpack &#x4F20;&#x7ED9; Loader &#x7684;&#x539F;&#x5185;&#x5BB9;&#x90FD;&#x662F; UTF-8 &#x683C;&#x5F0F;&#x7F16;&#x7801;&#x7684;&#x5B57;&#x7B26;&#x4E32;&#x3002;
&#x4F46;&#x6709;&#x4E9B;&#x573A;&#x666F;&#x4E0B; Loader &#x4E0D;&#x662F;&#x5904;&#x7406;&#x6587;&#x672C;&#x6587;&#x4EF6;&#xFF0C;&#x800C;&#x662F;&#x5904;&#x7406;&#x4E8C;&#x8FDB;&#x5236;&#x6587;&#x4EF6;&#xFF0C;&#x4F8B;&#x5982; file-loader&#xFF0C;&#x5C31;&#x9700;&#x8981; Webpack &#x7ED9; Loader &#x4F20;&#x5165;&#x4E8C;&#x8FDB;&#x5236;&#x683C;&#x5F0F;&#x7684;&#x6570;&#x636E;&#x3002;
&#x4E3A;&#x6B64;&#xFF0C;&#x4F60;&#x9700;&#x8981;&#x8FD9;&#x6837;&#x7F16;&#x5199; Loader&#xFF1A;</p>
<pre><code class="lang-js"><span class="hljs-built_in">module</span>.exports = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">source</span>) </span>{
    <span class="hljs-comment">// &#x5728; exports.raw === true &#x65F6;&#xFF0C;Webpack &#x4F20;&#x7ED9; Loader &#x7684; source &#x662F; Buffer &#x7C7B;&#x578B;&#x7684;</span>
    source <span class="hljs-keyword">instanceof</span> Buffer === <span class="hljs-literal">true</span>;
    <span class="hljs-comment">// Loader &#x8FD4;&#x56DE;&#x7684;&#x7C7B;&#x578B;&#x4E5F;&#x53EF;&#x4EE5;&#x662F; Buffer &#x7C7B;&#x578B;&#x7684;</span>
    <span class="hljs-comment">// &#x5728; exports.raw !== true &#x65F6;&#xFF0C;Loader &#x4E5F;&#x53EF;&#x4EE5;&#x8FD4;&#x56DE; Buffer &#x7C7B;&#x578B;&#x7684;&#x7ED3;&#x679C;</span>
    <span class="hljs-keyword">return</span> source;
};
<span class="hljs-comment">// &#x901A;&#x8FC7; exports.raw &#x5C5E;&#x6027;&#x544A;&#x8BC9; Webpack &#x8BE5; Loader &#x662F;&#x5426;&#x9700;&#x8981;&#x4E8C;&#x8FDB;&#x5236;&#x6570;&#x636E; </span>
<span class="hljs-built_in">module</span>.exports.raw = <span class="hljs-literal">true</span>;
</code></pre>
<h3 id="t285.8  &#x7F13;&#x5B58;">5.8  &#x7F13;&#x5B58; <a href="#t285.8  &#x7F13;&#x5B58;"> # </a></h3>
<p> &#x5728;&#x6709;&#x4E9B;&#x60C5;&#x51B5;&#x4E0B;&#xFF0C;&#x6709;&#x4E9B;&#x8F6C;&#x6362;&#x64CD;&#x4F5C;&#x9700;&#x8981;&#x5927;&#x91CF;&#x8BA1;&#x7B97;&#x975E;&#x5E38;&#x8017;&#x65F6;&#xFF0C;&#x5982;&#x679C;&#x6BCF;&#x6B21;&#x6784;&#x5EFA;&#x90FD;&#x91CD;&#x65B0;&#x6267;&#x884C;&#x91CD;&#x590D;&#x7684;&#x8F6C;&#x6362;&#x64CD;&#x4F5C;&#xFF0C;&#x6784;&#x5EFA;&#x5C06;&#x4F1A;&#x53D8;&#x5F97;&#x975E;&#x5E38;&#x7F13;&#x6162;&#x3002;
&#x4E3A;&#x6B64;&#xFF0C;Webpack &#x4F1A;&#x9ED8;&#x8BA4;&#x7F13;&#x5B58;&#x6240;&#x6709; Loader &#x7684;&#x5904;&#x7406;&#x7ED3;&#x679C;&#xFF0C;&#x4E5F;&#x5C31;&#x662F;&#x8BF4;&#x5728;&#x9700;&#x8981;&#x88AB;&#x5904;&#x7406;&#x7684;&#x6587;&#x4EF6;&#x6216;&#x8005;&#x5176;&#x4F9D;&#x8D56;&#x7684;&#x6587;&#x4EF6;&#x6CA1;&#x6709;&#x53D1;&#x751F;&#x53D8;&#x5316;&#x65F6;&#xFF0C;
&#x662F;&#x4E0D;&#x4F1A;&#x91CD;&#x65B0;&#x8C03;&#x7528;&#x5BF9;&#x5E94;&#x7684; Loader &#x53BB;&#x6267;&#x884C;&#x8F6C;&#x6362;&#x64CD;&#x4F5C;&#x7684;&#x3002;</p>
<pre><code class="lang-js"><span class="hljs-built_in">module</span>.exports = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">source</span>) </span>{
  <span class="hljs-comment">// &#x5173;&#x95ED;&#x8BE5; Loader &#x7684;&#x7F13;&#x5B58;&#x529F;&#x80FD;</span>
  <span class="hljs-keyword">this</span>.cacheable(<span class="hljs-literal">false</span>);
  <span class="hljs-keyword">return</span> source;
};
</code></pre>
<h3 id="t295.9 &#x5176;&#x5B83; Loader API">5.9 &#x5176;&#x5B83; Loader API <a href="#t295.9 &#x5176;&#x5B83; Loader API"> # </a></h3>
<ul>
<li><a href="https://webpack.js.org/api/loaders/">&#x5B8C;&#x6574;API</a></li>
</ul>
<table>
<thead>
<tr>
<th style="text-align:left">&#x65B9;&#x6CD5;&#x540D;</th>
<th style="text-align:left">&#x542B;&#x4E49;</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left"><code>this.context</code></td>
<td style="text-align:left">&#x5F53;&#x524D;&#x5904;&#x7406;&#x6587;&#x4EF6;&#x7684;&#x6240;&#x5728;&#x76EE;&#x5F55;&#xFF0C;&#x5047;&#x5982;&#x5F53;&#x524D; Loader &#x5904;&#x7406;&#x7684;&#x6587;&#x4EF6;&#x662F; /src/main.js&#xFF0C;&#x5219; this.context &#x5C31;&#x7B49;&#x4E8E; /src</td>
</tr>
<tr>
<td style="text-align:left"><code>this.resource</code></td>
<td style="text-align:left">&#x5F53;&#x524D;&#x5904;&#x7406;&#x6587;&#x4EF6;&#x7684;&#x5B8C;&#x6574;&#x8BF7;&#x6C42;&#x8DEF;&#x5F84;&#xFF0C;&#x5305;&#x62EC; querystring&#xFF0C;&#x4F8B;&#x5982; /src/main.js?name=1&#x3002;</td>
</tr>
<tr>
<td style="text-align:left"><code>this.resourcePath</code></td>
<td style="text-align:left">&#x5F53;&#x524D;&#x5904;&#x7406;&#x6587;&#x4EF6;&#x7684;&#x8DEF;&#x5F84;&#xFF0C;&#x4F8B;&#x5982; /src/main.js</td>
</tr>
<tr>
<td style="text-align:left"><code>this.resourceQuery</code></td>
<td style="text-align:left">&#x5F53;&#x524D;&#x5904;&#x7406;&#x6587;&#x4EF6;&#x7684; querystring</td>
</tr>
<tr>
<td style="text-align:left"><code>this.target</code></td>
<td style="text-align:left">&#x7B49;&#x4E8E; Webpack &#x914D;&#x7F6E;&#x4E2D;&#x7684; Target</td>
</tr>
<tr>
<td style="text-align:left"><code>this.loadModule</code></td>
<td style="text-align:left">&#x4F46; Loader &#x5728;&#x5904;&#x7406;&#x4E00;&#x4E2A;&#x6587;&#x4EF6;&#x65F6;&#xFF0C;&#x5982;&#x679C;&#x4F9D;&#x8D56;&#x5176;&#x5B83;&#x6587;&#x4EF6;&#x7684;&#x5904;&#x7406;&#x7ED3;&#x679C;&#x624D;&#x80FD;&#x5F97;&#x51FA;&#x5F53;&#x524D;&#x6587;&#x4EF6;&#x7684;&#x7ED3;&#x679C;&#x65F6;,&#x5C31;&#x53EF;&#x4EE5;&#x901A;&#x8FC7; this.loadModule(request: string, callback: function(err, source, sourceMap, module)) &#x53BB;&#x83B7;&#x5F97; request &#x5BF9;&#x5E94;&#x6587;&#x4EF6;&#x7684;&#x5904;&#x7406;&#x7ED3;&#x679C;</td>
</tr>
<tr>
<td style="text-align:left"><code>this.resolve</code></td>
<td style="text-align:left">&#x50CF; require &#x8BED;&#x53E5;&#x4E00;&#x6837;&#x83B7;&#x5F97;&#x6307;&#x5B9A;&#x6587;&#x4EF6;&#x7684;&#x5B8C;&#x6574;&#x8DEF;&#x5F84;&#xFF0C;&#x4F7F;&#x7528;&#x65B9;&#x6CD5;&#x4E3A; resolve(context: string, request: string, callback: function(err, result: string))</td>
</tr>
<tr>
<td style="text-align:left"><code>this.addDependency</code></td>
<td style="text-align:left">&#x7ED9;&#x5F53;&#x524D;&#x5904;&#x7406;&#x6587;&#x4EF6;&#x6DFB;&#x52A0;&#x5176;&#x4F9D;&#x8D56;&#x7684;&#x6587;&#x4EF6;&#xFF0C;&#x4EE5;&#x4FBF;&#x518D;&#x5176;&#x4F9D;&#x8D56;&#x7684;&#x6587;&#x4EF6;&#x53D1;&#x751F;&#x53D8;&#x5316;&#x65F6;&#xFF0C;&#x4F1A;&#x91CD;&#x65B0;&#x8C03;&#x7528; Loader &#x5904;&#x7406;&#x8BE5;&#x6587;&#x4EF6;&#x3002;&#x4F7F;&#x7528;&#x65B9;&#x6CD5;&#x4E3A; addDependency(file: string)</td>
</tr>
<tr>
<td style="text-align:left"><code>this.addContextDependency</code></td>
<td style="text-align:left">&#x548C; addDependency &#x7C7B;&#x4F3C;&#xFF0C;&#x4F46; addContextDependency &#x662F;&#x628A;&#x6574;&#x4E2A;&#x76EE;&#x5F55;&#x52A0;&#x5165;&#x5230;&#x5F53;&#x524D;&#x6B63;&#x5728;&#x5904;&#x7406;&#x6587;&#x4EF6;&#x7684;&#x4F9D;&#x8D56;&#x4E2D;&#x3002;&#x4F7F;&#x7528;&#x65B9;&#x6CD5;&#x4E3A; addContextDependency(directory: string)</td>
</tr>
<tr>
<td style="text-align:left"><code>this.clearDependencies</code></td>
<td style="text-align:left">&#x6E05;&#x9664;&#x5F53;&#x524D;&#x6B63;&#x5728;&#x5904;&#x7406;&#x6587;&#x4EF6;&#x7684;&#x6240;&#x6709;&#x4F9D;&#x8D56;&#xFF0C;&#x4F7F;&#x7528;&#x65B9;&#x6CD5;&#x4E3A; clearDependencies()</td>
</tr>
<tr>
<td style="text-align:left"><code>this.emitFile</code></td>
<td style="text-align:left">&#x8F93;&#x51FA;&#x4E00;&#x4E2A;&#x6587;&#x4EF6;&#xFF0C;&#x4F7F;&#x7528;&#x65B9;&#x6CD5;&#x4E3A; emitFile(name: string, content: Buffer/string, sourceMap: {...})</td>
</tr>
<tr>
<td style="text-align:left"><code>loader-utils.stringifyRequest</code></td>
<td style="text-align:left">Turns a request into a string that can be used inside require() or import while avoiding absolute paths. Use it instead of JSON.stringify(...) if you&apos;re generating code inside a loader  &#x628A;&#x4E00;&#x4E2A;&#x8BF7;&#x6C42;&#x5B57;&#x7B26;&#x4E32;&#x8F6C;&#x6210;&#x4E00;&#x4E2A;&#x5B57;&#x7B26;&#x4E32;&#xFF0C;&#x4EE5;&#x4FBF;&#x80FD;&#x5728;require&#x6216;&#x8005;import&#x4E2D;&#x4F7F;&#x7528;&#x4EE5;&#x907F;&#x514D;&#x7EDD;&#x5BF9;&#x8DEF;&#x5F84;&#x3002;&#x5982;&#x679C;&#x4F60;&#x5728;&#x4E00;&#x4E2A;loder&#x4E2D;&#x751F;&#x6210;&#x4EE3;&#x7801;&#x7684;&#x8BDD;&#x8BF7;&#x4F7F;&#x7528;&#x8FD9;&#x4E2A;&#x800C;&#x4E0D;&#x8981;&#x7528;JSON.stringify()</td>
</tr>
<tr>
<td style="text-align:left"><code>loader-utils.interpolateName</code></td>
<td style="text-align:left">Interpolates a filename template using multiple placeholders and/or a regular expression. The template and regular expression are set as query params called name and regExp on the current loader&apos;s context. &#x4F7F;&#x7528;&#x591A;&#x4E2A;&#x5360;&#x4F4D;&#x7B26;&#x6216;&#x4E00;&#x4E2A;&#x6B63;&#x5219;&#x8868;&#x8FBE;&#x5F0F;&#x8F6C;&#x6362;&#x4E00;&#x4E2A;&#x6587;&#x4EF6;&#x540D;&#x7684;&#x6A21;&#x5757;&#x3002;&#x8FD9;&#x4E2A;&#x6A21;&#x677F;&#x548C;&#x6B63;&#x5219;&#x8868;&#x8FBE;&#x5F0F;&#x88AB;&#x8BBE;&#x7F6E;&#x4E3A;&#x67E5;&#x8BE2;&#x53C2;&#x6570;&#xFF0C;&#x5728;&#x5F53;&#x524D;loader&#x7684;&#x4E0A;&#x4E0B;&#x6587;&#x4E2D;&#x88AB;&#x79F0;&#x4E3A;name&#x6216;&#x8005;regExp</td>
</tr>
</tbody>
</table>
<h2 id="t306.loader&#x5B9E;&#x6218;">6.loader&#x5B9E;&#x6218; <a href="#t306.loader&#x5B9E;&#x6218;"> # </a></h2>
<ul>
<li>loader-utils</li>
<li>schema-utils</li>
<li>this.async</li>
<li>this.cacheable</li>
<li>getOptions</li>
<li>validateOptions</li>
<li>addDependency</li>
</ul>
<h3 id="t316.1 babel-loader">6.1 babel-loader <a href="#t316.1 babel-loader"> # </a></h3>
<ul>
<li><a href="https://babeljs.io/docs/en/babel-core/">babel-core</a></li>
<li><a href="https://github.com/babel/babel-loader/blob/master/src/index.js">babel-loader</a></li>
<li><p><a href="https://babeljs.io/docs/en/babel-plugin-transform-react-jsx/">babel-plugin-transform-react-jsx</a></p>
</li>
<li><p>this.request=/loaders/babel-loader.js!/src/index.js&apos;</p>
</li>
<li>this.userRequest /src/index.js</li>
<li>this.rawRequest ./src/index.js</li>
<li>this.resourcePath /src/index.js</li>
</ul>
<pre><code class="lang-js"><span class="hljs-keyword">const</span> babel=<span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;babel-core&apos;</span>);
<span class="hljs-keyword">const</span> path=<span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;path&apos;</span>);

<span class="hljs-built_in">module</span>.exports=<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">source</span>) </span>{
    <span class="hljs-keyword">const</span> options = {
        <span class="hljs-attr">presets</span>: [<span class="hljs-string">&apos;env&apos;</span>],
        <span class="hljs-attr">sourceMap</span>: <span class="hljs-literal">true</span>,
        <span class="hljs-attr">filename</span>:<span class="hljs-keyword">this</span>.request.split(<span class="hljs-string">&apos;/&apos;</span>).pop()
    }
    <span class="hljs-keyword">let</span> result=babel.transform(source,options);
    <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.callback(<span class="hljs-literal">null</span>,result.code,result.map);
}
</code></pre>
<pre><code class="lang-js">resolveLoader: {
    <span class="hljs-attr">alias</span>: {
      <span class="hljs-string">&quot;babel-loader&quot;</span>: resolve(<span class="hljs-string">&apos;./build/babel-loader.js&apos;</span>)
    }
},
</code></pre>
<h3 id="t326.2 BannerLoader">6.2 BannerLoader <a href="#t326.2 BannerLoader"> # </a></h3>
<pre><code class="lang-js"><span class="hljs-keyword">const</span> loaderUtils = <span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;loader-utils&apos;</span>);
<span class="hljs-keyword">const</span> validateOptions = <span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;schema-utils&apos;</span>);
<span class="hljs-keyword">const</span> fs = <span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;fs&apos;</span>);
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">loader</span>(<span class="hljs-params">source</span>) </span>{
    <span class="hljs-comment">//&#x628A;loader&#x6539;&#x4E3A;&#x5F02;&#x6B65;,&#x4EFB;&#x52A1;&#x5B8C;&#x6210;&#x540E;&#x9700;&#x8981;&#x624B;&#x5DE5;&#x6267;&#x884C;callback</span>
    <span class="hljs-keyword">let</span> cb = <span class="hljs-keyword">this</span>.async();
    <span class="hljs-comment">//&#x542F;&#x7528;loader&#x7F13;&#x5B58;</span>
    <span class="hljs-keyword">this</span>.cacheable &amp;&amp; <span class="hljs-keyword">this</span>.cacheable();
    <span class="hljs-comment">//&#x7528;&#x6765;&#x9A8C;&#x8BC1;options&#x7684;&#x5408;&#x6CD5;&#x6027;</span>
    <span class="hljs-keyword">let</span> schema = { 
        <span class="hljs-attr">type</span>: <span class="hljs-string">&apos;object&apos;</span>,
        <span class="hljs-attr">properties</span>: {
            <span class="hljs-attr">filename</span>: {
                <span class="hljs-attr">type</span>: <span class="hljs-string">&apos;string&apos;</span>
            },
            <span class="hljs-attr">text</span>: {
                <span class="hljs-attr">type</span>: <span class="hljs-string">&apos;string&apos;</span>
            }
        }
    }
    <span class="hljs-comment">//&#x901A;&#x8FC7;&#x5DE5;&#x5177;&#x65B9;&#x6CD5;&#x83B7;&#x53D6;options</span>
    <span class="hljs-keyword">let</span> options = loaderUtils.getOptions(<span class="hljs-keyword">this</span>);
    <span class="hljs-comment">//&#x7528;&#x6765;&#x9A8C;&#x8BC1;options&#x7684;&#x5408;&#x6CD5;&#x6027;</span>
    validateOptions(schema, options, <span class="hljs-string">&apos;Banner-Loader&apos;</span>);
    <span class="hljs-keyword">let</span> { text, filename } = options;
    <span class="hljs-keyword">if</span> (text) {
        cb(<span class="hljs-literal">null</span>, text + source);
    } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (filename) {
        fs.readFile(filename, <span class="hljs-string">&apos;utf8&apos;</span>, (err, text) =&gt; {
            cb(err, text + source);
        });
    }
}

<span class="hljs-built_in">module</span>.exports = loader;
</code></pre>
<p>banner.js</p>
<pre><code class="lang-js"><span class="hljs-comment">/*zfpx*/</span>
</code></pre>
<pre><code class="lang-js">options:{
  <span class="hljs-attr">filename</span>:<span class="hljs-string">&quot;./src/loaders/banner.js&quot;</span>
}
</code></pre>
<h3 id="t336.3 pitch">6.3 pitch <a href="#t336.3 pitch"> # </a></h3>
<blockquote>
<p> The loaders are called from right to left. But in some cases loaders do not care about the results of the previous loader or the resource. They only care for metadata. The pitch method on the loaders is called from left to right before the loaders are called. If a loader delivers a result in the pitch method the process turns around and skips the remaining loaders, continuing with the calls to the more left loaders. data can be passed between pitch and normal call.</p>
</blockquote>
<ul>
<li>&#x6BD4;&#x5982;a!b!c!module, &#x6B63;&#x5E38;&#x8C03;&#x7528;&#x987A;&#x5E8F;&#x5E94;&#x8BE5;&#x662F;c&#x3001;b&#x3001;a&#xFF0C;&#x4F46;&#x662F;&#x771F;&#x6B63;&#x8C03;&#x7528;&#x987A;&#x5E8F;&#x662F; a(pitch)&#x3001;b(pitch)&#x3001;c(pitch)&#x3001;c&#x3001;b&#x3001;a,&#x5982;&#x679C;&#x5176;&#x4E2D;&#x4EFB;&#x4F55;&#x4E00;&#x4E2A;pitching loader&#x8FD4;&#x56DE;&#x4E86;&#x503C;&#x5C31;&#x76F8;&#x5F53;&#x4E8E;&#x5728;&#x5B83;&#x4EE5;&#x53CA;&#x5B83;&#x53F3;&#x8FB9;&#x7684;loader&#x5DF2;&#x7ECF;&#x6267;&#x884C;&#x5B8C;&#x6BD5;</li>
<li>&#x6BD4;&#x5982;&#x5982;&#x679C;b&#x8FD4;&#x56DE;&#x4E86;&#x5B57;&#x7B26;&#x4E32;&quot;result b&quot;, &#x63A5;&#x4E0B;&#x6765;&#x53EA;&#x6709;a&#x4F1A;&#x88AB;&#x7CFB;&#x7EDF;&#x6267;&#x884C;&#xFF0C;&#x4E14;a&#x7684;loader&#x6536;&#x5230;&#x7684;&#x53C2;&#x6570;&#x662F;result b</li>
</ul>
<blockquote>
<p>In the complex case, when multiple loaders are chained, only the last loader gets the resource file and only the first loader is expected to give back one or two values (JavaScript and SourceMap). Values that any other loader give back are passed to the previous loader.</p>
</blockquote>
<ul>
<li>loader&#x6839;&#x636E;&#x8FD4;&#x56DE;&#x503C;&#x53EF;&#x4EE5;&#x5206;&#x4E3A;&#x4E24;&#x79CD;&#xFF0C;&#x4E00;&#x79CD;&#x662F;&#x8FD4;&#x56DE;js&#x4EE3;&#x7801;&#xFF08;&#x4E00;&#x4E2A;module&#x7684;&#x4EE3;&#x7801;&#xFF0C;&#x542B;&#x6709;&#x7C7B;&#x4F3C;module.export&#x8BED;&#x53E5;&#xFF09;&#x7684;loader&#xFF0C;&#x8FD8;&#x6709;&#x4E0D;&#x80FD;&#x4F5C;&#x4E3A;&#x6700;&#x5DE6;&#x8FB9;loader&#x7684;&#x5176;&#x4ED6;loader</li>
<li>&#x6709;&#x65F6;&#x5019;&#x6211;&#x4EEC;&#x60F3;&#x628A;&#x4E24;&#x4E2A;&#x7B2C;&#x4E00;&#x79CD;loader chain&#x8D77;&#x6765;&#xFF0C;&#x6BD4;&#x5982;style-loader!css-loader!
&#x95EE;&#x9898;&#x662F;css-loader&#x7684;&#x8FD4;&#x56DE;&#x503C;&#x662F;&#x4E00;&#x4E32;js&#x4EE3;&#x7801;&#xFF0C;&#x5982;&#x679C;&#x6309;&#x6B63;&#x5E38;&#x65B9;&#x5F0F;&#x5199;style-loader&#x7684;&#x53C2;&#x6570;&#x5C31;&#x662F;&#x4E00;&#x4E32;&#x4EE3;&#x7801;&#x5B57;&#x7B26;&#x4E32;</li>
<li>&#x4E3A;&#x4E86;&#x89E3;&#x51B3;&#x8FD9;&#x79CD;&#x95EE;&#x9898;&#xFF0C;&#x6211;&#x4EEC;&#x9700;&#x8981;&#x5728;style-loader&#x91CC;&#x6267;&#x884C;require(css-loader!resouce)</li>
</ul>
<p>pitch&#x4E0E;loader&#x672C;&#x8EAB;&#x65B9;&#x6CD5;&#x7684;&#x6267;&#x884C;&#x987A;&#x5E8F;&#x56FE;</p>
<pre><code class="lang-js">|- a-loader <span class="hljs-string">`pitch`</span>
  |- b-loader <span class="hljs-string">`pitch`</span>
    |- c-loader <span class="hljs-string">`pitch`</span>
      |- requested <span class="hljs-built_in">module</span> is picked up <span class="hljs-keyword">as</span> a dependency
    |- c-loader normal execution
  |- b-loader normal execution
|- a-loader normal execution
</code></pre>
<h4 id="t346.3.1 log-loader1.js">6.3.1 log-loader1.js <a href="#t346.3.1 log-loader1.js"> # </a></h4>
<pre><code class="lang-js"><span class="hljs-comment">//source&#x5C31;&#x662F;&#x63A5;&#x6536;&#x5230;&#x7684;&#x6E90;&#x6587;&#x4EF6;&#x7684;&#x5185;&#x5BB9;</span>
<span class="hljs-keyword">let</span> loader = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">source, sourceMaps, extra</span>) </span>{
    <span class="hljs-keyword">let</span> cb = <span class="hljs-keyword">this</span>.async();
    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&apos;loader1&apos;</span>);
    cb(<span class="hljs-literal">null</span>, source);
}
<span class="hljs-built_in">module</span>.exports = loader;
loader.pitch = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">remainingRequest,previousRequest,data</span>) </span>{
    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&apos;pitch1&apos;</span>);
}
</code></pre>
<h4 id="t356.3.2 log-loader2.js">6.3.2 log-loader2.js <a href="#t356.3.2 log-loader2.js"> # </a></h4>
<pre><code class="lang-js"><span class="hljs-comment">//source&#x5C31;&#x662F;&#x63A5;&#x6536;&#x5230;&#x7684;&#x6E90;&#x6587;&#x4EF6;&#x7684;&#x5185;&#x5BB9;</span>
<span class="hljs-keyword">let</span> loader = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">source, sourceMaps, extra</span>) </span>{
    <span class="hljs-keyword">let</span> cb = <span class="hljs-keyword">this</span>.async();
    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&apos;loader2&apos;</span>);
    cb(<span class="hljs-literal">null</span>, source);
}

<span class="hljs-built_in">module</span>.exports = loader;
loader.pitch = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">remainingRequest,previousRequest,data</span>) </span>{
    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&apos;pitch2&apos;</span>);
    <span class="hljs-keyword">return</span> <span class="hljs-string">&quot;2&quot;</span>;
}
</code></pre>
<h4 id="t366.3.3 log-loader3.js">6.3.3 log-loader3.js <a href="#t366.3.3 log-loader3.js"> # </a></h4>
<pre><code class="lang-js"><span class="hljs-comment">//source&#x5C31;&#x662F;&#x63A5;&#x6536;&#x5230;&#x7684;&#x6E90;&#x6587;&#x4EF6;&#x7684;&#x5185;&#x5BB9;</span>
<span class="hljs-keyword">const</span> loaderUtils = <span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;loader-utils&apos;</span>);
<span class="hljs-keyword">let</span> loader = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">source</span>) </span>{
    <span class="hljs-keyword">let</span> cb = <span class="hljs-keyword">this</span>.async();
    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&apos;loader3&apos;</span>);
    cb(<span class="hljs-literal">null</span>, source);
}
<span class="hljs-built_in">module</span>.exports = loader;
loader.pitch = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&apos;pitch3&apos;</span>);
}
</code></pre>
<pre><code class="lang-js">{
  <span class="hljs-attr">test</span>: <span class="hljs-regexp">/\.less$/</span>,
  <span class="hljs-attr">use</span>:[path.resolve(<span class="hljs-string">&apos;src/loaders/log-loader1&apos;</span>),path.resolve(<span class="hljs-string">&apos;src/loaders/log-loader2&apos;</span>),path.resolve(<span class="hljs-string">&apos;src/loaders/log-loader3&apos;</span>)]
}
</code></pre>
<h3 id="t376.4 css">6.4 css <a href="#t376.4 css"> # </a></h3>
<ul>
<li><a href="https://github.com/webpack-contrib/css-loader/blob/master/lib/loader.js">css-loader</a> &#x7684;&#x4F5C;&#x7528;&#x662F;&#x5904;&#x7406;css&#x4E2D;&#x7684; @import &#x548C; url &#x8FD9;&#x6837;&#x7684;&#x5916;&#x90E8;&#x8D44;&#x6E90;</li>
<li><a href="https://github.com/webpack-contrib/style-loader/blob/master/index.js">style-loader</a> &#x7684;&#x4F5C;&#x7528;&#x662F;&#x628A;&#x6837;&#x5F0F;&#x63D2;&#x5165;&#x5230; DOM&#x4E2D;&#xFF0C;&#x65B9;&#x6CD5;&#x662F;&#x5728;head&#x4E2D;&#x63D2;&#x5165;&#x4E00;&#x4E2A;style&#x6807;&#x7B7E;&#xFF0C;&#x5E76;&#x628A;&#x6837;&#x5F0F;&#x5199;&#x5165;&#x5230;&#x8FD9;&#x4E2A;&#x6807;&#x7B7E;&#x7684; innerHTML&#x91CC;</li>
<li><a href="https://github.com/webpack-contrib/less-loader">less-loader</a> Compiles Less to CSS</li>
<li><a href="https://webpack.js.org/api/loaders/#pitching-loader">pitching-loader</a></li>
<li><a href="https://github.com/webpack/loader-utils">loader-utils</a></li>
<li><p><a href="https://webpack.js.org/concepts/loaders/#configuration">!!</a></p>
</li>
<li><p>post(&#x540E;&#x7F6E;)+inline(&#x5185;&#x8054;)+normal(&#x6B63;&#x5E38;)+pre(&#x524D;&#x7F6E;)</p>
</li>
<li><code>!</code>  noAutoLoaders &#x6240;&#x6709;&#x7684;&#x666E;&#x901A;loader&#x90FD;&#x4E0D;&#x8981;&#x6267;&#x884C;</li>
<li><code>!!</code> noPrePostAutoLoaders &#x4E0D;&#x8981;&#x524D;&#x540E;&#x7F6E;loader</li>
<li><code>-!</code> noPreAutoLoaders &#x4E0D;&#x8981;&#x524D;&#x7F6E;loader</li>
</ul>
<h4 id="t386.4.1 less-loader.js">6.4.1 less-loader.js <a href="#t386.4.1 less-loader.js"> # </a></h4>
<pre><code class="lang-js"><span class="hljs-keyword">let</span> less = <span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;less&apos;</span>);
<span class="hljs-built_in">module</span>.exports = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">source</span>) </span>{
    <span class="hljs-keyword">let</span> callback = <span class="hljs-keyword">this</span>.async();
    less.render(source, { <span class="hljs-attr">filename</span>: <span class="hljs-keyword">this</span>.resource }, (err, output) =&gt; {
        <span class="hljs-keyword">this</span>.callback(err, output.css);
    });
}
</code></pre>
<p>&#x6709;&#x4E9B;&#x65F6;&#x95F4;&#x6211;&#x4EEC;&#x5E0C;&#x671B;less-loader&#x53EF;&#x4EE5;&#x653E;&#x5728;use&#x6570;&#x7EC4;&#x6700;&#x5DE6;&#x8FB9;&#xFF0C;&#x6700;&#x5DE6;&#x8FB9;&#x8981;&#x6C42;&#x8FD4;&#x56DE;&#x4E00;&#x4E2A;JS&#x811A;&#x672C;</p>
<pre><code class="lang-js"><span class="hljs-keyword">let</span> less=<span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;less&apos;</span>);
<span class="hljs-built_in">module</span>.exports=<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">source</span>) </span>{
  <span class="hljs-keyword">let</span> callback = <span class="hljs-keyword">this</span>.async();
    less.render(source,(err,output) =&gt; {
        callback(err, <span class="hljs-string">`module.exports = <span class="hljs-subst">${<span class="hljs-built_in">JSON</span>.stringify(output.css)}</span>`</span>);
    });
}
</code></pre>
<h4 id="t396.4.2 style-loader">6.4.2 style-loader <a href="#t396.4.2 style-loader"> # </a></h4>
<pre><code class="lang-js"><span class="hljs-keyword">let</span> loaderUtils=<span class="hljs-built_in">require</span>(<span class="hljs-string">&quot;loader-utils&quot;</span>);
 <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">loader</span>(<span class="hljs-params">source</span>) </span>{
    <span class="hljs-keyword">let</span> script=(<span class="hljs-string">`
      let style = document.createElement(&quot;style&quot;);
      style.innerHTML = <span class="hljs-subst">${<span class="hljs-built_in">JSON</span>.stringify(source)}</span>;
      document.head.appendChild(style);
    `</span>);
    <span class="hljs-keyword">return</span> script;
} 
<span class="hljs-comment">//pitch&#x91CC;&#x7684;&#x53C2;&#x6570;&#x53EF;&#x4E0D;&#x662F;&#x6587;&#x4EF6;&#x5185;&#x5BB9;&#xFF0C;&#x800C;&#x662F;&#x6587;&#x4EF6;&#x7684;&#x8BF7;&#x6C42;&#x8DEF;&#x5F84;</span>
<span class="hljs-comment">//pitch request&#x5C31;&#x662F;&#x4F60;&#x8981;&#x52A0;&#x8F7D;&#x7684;&#x6587;&#x4EF6;&#x8DEF;&#x5F84; //index.less</span>
loader.pitch = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">request</span>) </span>{
    <span class="hljs-keyword">let</span> style = <span class="hljs-string">`
    var style = document.createElement(&quot;style&quot;);
    style.innerHTML = require(<span class="hljs-subst">${loaderUtils.stringifyRequest(<span class="hljs-keyword">this</span>, <span class="hljs-string">&quot;!!&quot;</span> + request)}</span>);
    document.head.appendChild(style);
 `</span>;
    <span class="hljs-keyword">return</span> style;
}
<span class="hljs-built_in">module</span>.exports = loader;
</code></pre>
<h4 id="t406.4.3 css-loader.js">6.4.3 css-loader.js <a href="#t406.4.3 css-loader.js"> # </a></h4>
<pre><code class="lang-js"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">loader</span>(<span class="hljs-params">source</span>) </span>{
    <span class="hljs-keyword">let</span> reg = <span class="hljs-regexp">/url\((.+?)\)/g</span>;
    <span class="hljs-keyword">let</span> current;
    <span class="hljs-keyword">let</span> pos = <span class="hljs-number">0</span>;
    <span class="hljs-keyword">let</span> arr = [<span class="hljs-string">`let lists = [];`</span>];
    <span class="hljs-keyword">while</span> (current = reg.exec(source)) {
        <span class="hljs-keyword">let</span> [matchUrl, p] = current;
        <span class="hljs-keyword">let</span> index = reg.lastIndex - matchUrl.length;
        arr.push(<span class="hljs-string">`lists.push(<span class="hljs-subst">${<span class="hljs-built_in">JSON</span>.stringify(source.slice(pos, index))}</span>)`</span>);
        pos = reg.lastIndex;
        arr.push(<span class="hljs-string">`lists.push(&quot;url(&quot;+require(<span class="hljs-subst">${p}</span>)+&quot;)&quot;)`</span>);
    }
    arr.push(<span class="hljs-string">`lists.push(<span class="hljs-subst">${<span class="hljs-built_in">JSON</span>.stringify(source.slice(pos))}</span>)`</span>);
    arr.push(<span class="hljs-string">`module.exports = lists.join(&apos;&apos;)`</span>);
    <span class="hljs-keyword">return</span> arr.join(<span class="hljs-string">&apos;\r\n&apos;</span>);
}
<span class="hljs-built_in">module</span>.exports = loader;
</code></pre>
<h4 id="t416.4.4 bundle.js">6.4.4 bundle.js <a href="#t416.4.4 bundle.js"> # </a></h4>
<pre><code class="lang-js">{
 <span class="hljs-string">&quot;./loaders/css-loader.js!./loaders/less-loader.js!./src/index.less&quot;</span>:
<span class="hljs-comment">/*!*************************************************************************!*\
  !*** ./loaders/css-loader.js!./loaders/less-loader.js!./src/index.less ***!
  \*************************************************************************/</span>
 (<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">module, exports, __webpack_require__</span>) </span>{
<span class="hljs-built_in">eval</span>(<span class="hljs-string">&quot;let lists = [];\r\nlists.push(\&quot;div {\\n  color: red;\\n}\\nbody {\\n  background: \&quot;)\r\nlists.push(\&quot;url(\&quot;+__webpack_require__(/*! ./baidu.png */ \&quot;./src/baidu.png\&quot;)+\&quot;)\&quot;)\r\nlists.push(\&quot;;\\n}\\n\&quot;)\r\nmodule.exports = lists.join(&apos;&apos;)\n\n//# sourceURL=webpack:///./src/index.less?./loaders/css-loader.js!./loaders/less-loader.js&quot;</span>);

 }),
 <span class="hljs-string">&quot;./src/baidu.png&quot;</span>:
 (<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">module, exports, __webpack_require__</span>) </span>{
<span class="hljs-built_in">eval</span>(<span class="hljs-string">&quot;module.exports = __webpack_require__.p + \&quot;b15c113aeddbeb606d938010b88cf8e6.png\&quot;;\n\n//# sourceURL=webpack:///./src/baidu.png?&quot;</span>);
 }),
 <span class="hljs-string">&quot;./src/index.js&quot;</span>:
 (<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">module, __webpack_exports__, __webpack_require__</span>) </span>{
<span class="hljs-built_in">eval</span>(<span class="hljs-string">&quot;__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _index_less__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./index.less */ \&quot;./src/index.less\&quot;);\n/* harmony import */ var _index_less__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_index_less__WEBPACK_IMPORTED_MODULE_0__);\n\n\n//# sourceURL=webpack:///./src/index.js?&quot;</span>);
 }),
 <span class="hljs-string">&quot;./src/index.less&quot;</span>:
 (<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">module, exports, __webpack_require__</span>) </span>{
<span class="hljs-built_in">eval</span>(<span class="hljs-string">&quot;\n    var style = document.createElement(\&quot;style\&quot;);\n    style.innerHTML = __webpack_require__(/*! !../loaders/css-loader.js!../loaders/less-loader.js!./index.less */ \&quot;./loaders/css-loader.js!./loaders/less-loader.js!./src/index.less\&quot;);\n    document.head.appendChild(style);\n \n\n//# sourceURL=webpack:///./src/index.less?&quot;</span>);
 }
</code></pre>
<h4 id="t426.4.5 exact-loader.js">6.4.5 exact-loader.js <a href="#t426.4.5 exact-loader.js"> # </a></h4>
<pre><code class="lang-js"><span class="hljs-comment">//&#x628A;CSS&#x6587;&#x4EF6;&#x5355;&#x72EC;&#x653E;&#x7F6E;&#x5230;&#x4E00;&#x4E2A;&#x6587;&#x4EF6;&#x4E2D;&#x53BB;&#xFF0C;&#x7136;&#x540E;&#x5728;&#x9875;&#x9762;&#x4E2D;&#x901A;&#x8FC7;link&#x6807;&#x7B7E;&#x53BB;&#x5F15;&#x5165;</span>
<span class="hljs-keyword">let</span> loader = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">source</span>) </span>{
    <span class="hljs-comment">//&#x53D1;&#x5C04;&#x6216;&#x8005;&#x8BF4;&#x8F93;&#x51FA;&#x4E00;&#x4E2A;&#x6587;&#x4EF6;&#xFF0C;&#x8FD9;&#x4E2A;&#x6587;&#x4EF6;&#x7684;&#x5185;&#x5BB9; &#x5C31;&#x662F;css&#x6587;&#x4EF6;&#x7684;&#x5185;&#x5BB9;</span>
    <span class="hljs-keyword">this</span>.emitFile(<span class="hljs-string">&apos;main.css&apos;</span>, source);
    <span class="hljs-keyword">let</span> script = <span class="hljs-string">`
     let link  = document.createElement(&apos;link&apos;);
     link.setAttribute(&apos;rel&apos;,&apos;stylesheet&apos;);
     link.setAttribute(&apos;href&apos;,&apos;main.css&apos;);
     document.head.appendChild(link);
  `</span>;
    <span class="hljs-keyword">return</span> script;
}
<span class="hljs-built_in">module</span>.exports = loader;
</code></pre>
<h3 id="t436.5 file">6.5 file <a href="#t436.5 file"> # </a></h3>
<p><code>file-loader</code> &#x5E76;&#x4E0D;&#x4F1A;&#x5BF9;&#x6587;&#x4EF6;&#x5185;&#x5BB9;&#x8FDB;&#x884C;&#x4EFB;&#x4F55;&#x8F6C;&#x6362;&#xFF0C;&#x53EA;&#x662F;&#x590D;&#x5236;&#x4E00;&#x4EFD;&#x6587;&#x4EF6;&#x5185;&#x5BB9;&#xFF0C;&#x5E76;&#x6839;&#x636E;&#x914D;&#x7F6E;&#x4E3A;&#x4ED6;&#x751F;&#x6210;&#x4E00;&#x4E2A;&#x552F;&#x4E00;&#x7684;&#x6587;&#x4EF6;&#x540D;&#x3002;</p>
<h4 id="t446.5.1 file-loader">6.5.1 file-loader <a href="#t446.5.1 file-loader"> # </a></h4>
<ul>
<li><a href="https://github.com/webpack-contrib/file-loader/blob/master/src/index.js">file-loader</a></li>
<li><a href="https://webpack.js.org/guides/public-path/#on-the-fly">public-path</a></li>
</ul>
<pre><code class="lang-js"><span class="hljs-keyword">const</span> { getOptions, interpolateName } = <span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;loader-utils&apos;</span>);
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">loader</span>(<span class="hljs-params">content</span>) </span>{
    <span class="hljs-keyword">let</span> options=getOptions(<span class="hljs-keyword">this</span>)||{};
    <span class="hljs-keyword">let</span> url = interpolateName(<span class="hljs-keyword">this</span>, options.filename || <span class="hljs-string">&quot;[hash]&quot;</span>, {content});
    url = url  + <span class="hljs-keyword">this</span>.resourcePath.slice(<span class="hljs-keyword">this</span>.resourcePath.lastIndexOf(<span class="hljs-string">&apos;.&apos;</span>));
    <span class="hljs-comment">//&#x53D1;&#x5C04;&#x4E00;&#x4E2A;&#x6587;&#x4EF6; &#x5411;&#x8F93;&#x51FA;&#x91CC;&#x4FDD;&#x5B58;&#x4E00;&#x4E2A;&#x6587;&#x4EF6;</span>
    <span class="hljs-keyword">this</span>.emitFile(url, content);
    <span class="hljs-keyword">return</span> <span class="hljs-string">`module.exports = <span class="hljs-subst">${<span class="hljs-built_in">JSON</span>.stringify(url)}</span>`</span>;
}
loader.raw = <span class="hljs-literal">true</span>;
<span class="hljs-built_in">module</span>.exports = loader;
</code></pre>
<ul>
<li>&#x901A;&#x8FC7; <code>loaderUtils.interpolateName</code> &#x65B9;&#x6CD5;&#x53EF;&#x4EE5;&#x6839;&#x636E; options.name &#x4EE5;&#x53CA;&#x6587;&#x4EF6;&#x5185;&#x5BB9;&#x751F;&#x6210;&#x4E00;&#x4E2A;&#x552F;&#x4E00;&#x7684;&#x6587;&#x4EF6;&#x540D; url&#xFF08;&#x4E00;&#x822C;&#x914D;&#x7F6E;&#x90FD;&#x4F1A;&#x5E26;&#x4E0A;hash&#xFF0C;&#x5426;&#x5219;&#x5F88;&#x53EF;&#x80FD;&#x7531;&#x4E8E;&#x6587;&#x4EF6;&#x91CD;&#x540D;&#x800C;&#x51B2;&#x7A81;&#xFF09;</li>
<li>&#x901A;&#x8FC7; <code>this.emitFile(url, content)</code> &#x544A;&#x8BC9; webpack &#x6211;&#x9700;&#x8981;&#x521B;&#x5EFA;&#x4E00;&#x4E2A;&#x6587;&#x4EF6;&#xFF0C;webpack&#x4F1A;&#x6839;&#x636E;&#x53C2;&#x6570;&#x521B;&#x5EFA;&#x5BF9;&#x5E94;&#x7684;&#x6587;&#x4EF6;&#xFF0C;&#x653E;&#x5728; <code>public path</code> &#x76EE;&#x5F55;&#x4E0B;</li>
<li>&#x8FD4;&#x56DE; <code>module.exports = ${JSON.stringify(url)}</code>,&#x8FD9;&#x6837;&#x5C31;&#x4F1A;&#x628A;&#x539F;&#x6765;&#x7684;&#x6587;&#x4EF6;&#x8DEF;&#x5F84;&#x66FF;&#x6362;&#x4E3A;&#x7F16;&#x8BD1;&#x540E;&#x7684;&#x8DEF;&#x5F84;</li>
</ul>
<h4 id="t456.5.2 url-loader">6.5.2 url-loader <a href="#t456.5.2 url-loader"> # </a></h4>
<pre><code class="lang-js"><span class="hljs-keyword">let</span> { getOptions } = <span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;loader-utils&apos;</span>);
<span class="hljs-keyword">var</span> mime = <span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;mime&apos;</span>);
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">loader</span>(<span class="hljs-params">source</span>) </span>{
    <span class="hljs-keyword">let</span> options=getOptions(<span class="hljs-keyword">this</span>)||{};
    <span class="hljs-keyword">let</span> { limit, fallback=<span class="hljs-string">&apos;file-loader&apos;</span> } = options;
    <span class="hljs-keyword">if</span> (limit) {
      limit = <span class="hljs-built_in">parseInt</span>(limit, <span class="hljs-number">10</span>);
    }
    <span class="hljs-keyword">const</span> mimetype=mime.getType(<span class="hljs-keyword">this</span>.resourcePath);
    <span class="hljs-keyword">if</span> (!limit || source.length &lt; limit) {
        <span class="hljs-keyword">let</span> base64 = <span class="hljs-string">`data:<span class="hljs-subst">${mimetype}</span>;base64,<span class="hljs-subst">${source.toString(<span class="hljs-string">&apos;base64&apos;</span>)}</span>`</span>;
        <span class="hljs-keyword">return</span> <span class="hljs-string">`module.exports = <span class="hljs-subst">${<span class="hljs-built_in">JSON</span>.stringify(base64)}</span>`</span>;
    } <span class="hljs-keyword">else</span> {
        <span class="hljs-keyword">let</span> fileLoader = <span class="hljs-built_in">require</span>(fallback || <span class="hljs-string">&apos;file-loader&apos;</span>);
        <span class="hljs-keyword">return</span> fileLoader.call(<span class="hljs-keyword">this</span>, source);
    }
}
loader.raw = <span class="hljs-literal">true</span>;
<span class="hljs-built_in">module</span>.exports = loader;
</code></pre>
<h3 id="t466.6 html-layout-loader">6.6 html-layout-loader <a href="#t466.6 html-layout-loader"> # </a></h3>
<h3 id="t476.6.1 webpack.config.js">6.6.1 webpack.config.js <a href="#t476.6.1 webpack.config.js"> # </a></h3>
<pre><code class="lang-js">{
  <span class="hljs-attr">test</span>: <span class="hljs-regexp">/\.html$/</span>,
     <span class="hljs-attr">use</span>: {
          <span class="hljs-attr">loader</span>: <span class="hljs-string">&apos;html-layout-loader&apos;</span>,
          <span class="hljs-attr">options</span>: {
              <span class="hljs-attr">layout</span>: path.join(__dirname, <span class="hljs-string">&apos;src&apos;</span>, <span class="hljs-string">&apos;layout.html&apos;</span>),
              <span class="hljs-attr">placeholder</span>: <span class="hljs-string">&apos;{{__content__}}&apos;</span>
     }
  }
}

plugins: [
        <span class="hljs-keyword">new</span> HtmlWebpackPlugin({
            <span class="hljs-attr">template</span>: <span class="hljs-string">&apos;./src/login.html&apos;</span>,
            <span class="hljs-attr">filename</span>: <span class="hljs-string">&apos;login.html&apos;</span>
        }),
        <span class="hljs-keyword">new</span> HtmlWebpackPlugin({
            <span class="hljs-attr">template</span>: <span class="hljs-string">&apos;./src/home.html&apos;</span>,
            <span class="hljs-attr">filename</span>: <span class="hljs-string">&apos;home.html&apos;</span>
        })
]
</code></pre>
<h3 id="t486.6.2 html-layout-loader">6.6.2 html-layout-loader <a href="#t486.6.2 html-layout-loader"> # </a></h3>
<pre><code class="lang-js"><span class="hljs-keyword">const</span> path = <span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;path&apos;</span>);
<span class="hljs-keyword">const</span> fs = <span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;fs&apos;</span>);
<span class="hljs-keyword">const</span> loaderUtils = <span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;loader-utils&apos;</span>);
<span class="hljs-keyword">const</span> defaultOptions = {
    <span class="hljs-attr">placeholder</span>: <span class="hljs-string">&apos;{{__content__}}&apos;</span>,
    <span class="hljs-attr">decorator</span>: <span class="hljs-string">&apos;layout&apos;</span>
}
<span class="hljs-built_in">module</span>.exports = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">source</span>) </span>{
    <span class="hljs-keyword">let</span> callback = <span class="hljs-keyword">this</span>.async();
    <span class="hljs-keyword">this</span>.cacheable &amp;&amp; <span class="hljs-keyword">this</span>.cacheable();
    <span class="hljs-keyword">const</span> options = <span class="hljs-built_in">Object</span>.assign(loaderUtils.getOptions(<span class="hljs-keyword">this</span>), defaultOptions);
    <span class="hljs-keyword">const</span> { placeholder, decorator, layout } = options;
    fs.readFile(layout, <span class="hljs-string">&apos;utf8&apos;</span>, (err, html) =&gt; {
        html = html.replace(placeholder, source);
        callback(<span class="hljs-literal">null</span>, <span class="hljs-string">`module.exports = <span class="hljs-subst">${<span class="hljs-built_in">JSON</span>.stringify(html)}</span>`</span>);
    })
}
</code></pre>
<pre><code class="lang-js"><span class="hljs-keyword">const</span> path = <span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;path&apos;</span>);
<span class="hljs-keyword">const</span> fs = <span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;fs&apos;</span>);
<span class="hljs-keyword">const</span> loaderUtils = <span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;loader-utils&apos;</span>);
<span class="hljs-keyword">const</span> defaultOptions = {
    <span class="hljs-attr">placeholder</span>:<span class="hljs-string">&apos;{{__content__}}&apos;</span>,
    <span class="hljs-attr">decorator</span>:<span class="hljs-string">&apos;layout&apos;</span>
}
<span class="hljs-built_in">module</span>.exports = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">source</span>)</span>{
    <span class="hljs-keyword">let</span> callback = <span class="hljs-keyword">this</span>.async();
    <span class="hljs-keyword">this</span>.cacheable&amp;&amp; <span class="hljs-keyword">this</span>.cacheable();
    <span class="hljs-keyword">const</span> options = {...loaderUtils.getOptions(<span class="hljs-keyword">this</span>),...defaultOptions};
    <span class="hljs-keyword">const</span> {placeholder,layout,decorator} = options;
    <span class="hljs-keyword">const</span> layoutReg = <span class="hljs-keyword">new</span> <span class="hljs-built_in">RegExp</span>(<span class="hljs-string">`@<span class="hljs-subst">${decorator}</span>\\((.+?)\\)`</span>);
    <span class="hljs-keyword">let</span> result = source.match(layoutReg);
    <span class="hljs-keyword">if</span>(result){
        source = source.replace(result[<span class="hljs-number">0</span>],<span class="hljs-string">&apos;&apos;</span>);
        render(path.resolve(<span class="hljs-keyword">this</span>.context,result[<span class="hljs-number">1</span>]), placeholder, source, callback)
    }<span class="hljs-keyword">else</span>{
        render(layout, placeholder, source, callback);
    }

}
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">render</span>(<span class="hljs-params">layout, placeholder, source, callback</span>) </span>{
    fs.readFile(layout, <span class="hljs-string">&apos;utf8&apos;</span>, (err, html) =&gt; {
        html = html.replace(placeholder, source);
        callback(<span class="hljs-literal">null</span>, <span class="hljs-string">`module.exports = <span class="hljs-subst">${<span class="hljs-built_in">JSON</span>.stringify(html)}</span>`</span>);
    })
}
</code></pre>
<h2 id="t497.loader&#x6D4B;&#x8BD5;">7.loader&#x6D4B;&#x8BD5; <a href="#t497.loader&#x6D4B;&#x8BD5;"> # </a></h2>
<h3 id="t507.1 &#x5B89;&#x88C5;&#x4F9D;&#x8D56;">7.1 &#x5B89;&#x88C5;&#x4F9D;&#x8D56; <a href="#t507.1 &#x5B89;&#x88C5;&#x4F9D;&#x8D56;"> # </a></h3>
<pre><code class="lang-js">cnpm install --save-dev jest babel-jest babel-preset-env
cnpm install --save-dev webpack memory-fs
</code></pre>
<h3 id="t517.2 src/loader.js">7.2 src/loader.js <a href="#t517.2 src/loader.js"> # </a></h3>
<pre><code class="lang-js"><span class="hljs-keyword">let</span> {getOptions} = <span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;loader-utils&apos;</span>);
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">loader</span>(<span class="hljs-params">source</span>)</span>{
   <span class="hljs-keyword">const</span> options = getOptions(<span class="hljs-keyword">this</span>);
   source=source.replace(<span class="hljs-regexp">/\[name\]/g</span>,options.name);
   <span class="hljs-keyword">return</span> <span class="hljs-string">`module.exports = <span class="hljs-subst">${<span class="hljs-built_in">JSON</span>.stringify(source)}</span>`</span>;
}
<span class="hljs-built_in">module</span>.exports=loader;
</code></pre>
<h3 id="t527.3 test/example.txt">7.3 test/example.txt <a href="#t527.3 test/example.txt"> # </a></h3>
<pre><code class="lang-js">hello [name]
</code></pre>
<h3 id="t537.4 test/compile.js">7.4 test/compile.js <a href="#t537.4 test/compile.js"> # </a></h3>
<pre><code class="lang-js"><span class="hljs-keyword">const</span> path=<span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;path&apos;</span>);
<span class="hljs-keyword">const</span> webpack=<span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;webpack&apos;</span>);
<span class="hljs-keyword">let</span> MemoryFs=<span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;memory-fs&apos;</span>);
<span class="hljs-built_in">module</span>.exports = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">fixture,options={}</span>) </span>{
    <span class="hljs-keyword">const</span> compiler=webpack({
        <span class="hljs-attr">mode</span>:<span class="hljs-string">&apos;development&apos;</span>,
        <span class="hljs-attr">context</span>: __dirname,
        <span class="hljs-attr">entry</span>: <span class="hljs-string">`./<span class="hljs-subst">${fixture}</span>`</span>,
        <span class="hljs-attr">output</span>: {
            <span class="hljs-attr">path</span>: path.resolve(__dirname),
            <span class="hljs-attr">filename</span>:<span class="hljs-string">&apos;bundle.js&apos;</span>
        },
        <span class="hljs-attr">module</span>: {
            <span class="hljs-attr">rules</span>: [
                {
                    <span class="hljs-attr">test</span>: <span class="hljs-regexp">/\.txt$/</span>,
                    <span class="hljs-attr">use</span>: {
                        <span class="hljs-attr">loader</span>: path.resolve(__dirname,<span class="hljs-string">&apos;../src/loader.js&apos;</span>),
                        <span class="hljs-attr">options</span>:{<span class="hljs-attr">name</span>:<span class="hljs-string">&apos;Alice&apos;</span>}
                    }
                }
            ]
        }
    });
    compiler.outputFileSystem=<span class="hljs-keyword">new</span> MemoryFs();
    <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> <span class="hljs-built_in">Promise</span>(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">resolve,reject</span>) </span>{
        compiler.run(<span class="hljs-function">(<span class="hljs-params">err,stats</span>) =&gt;</span> {
            <span class="hljs-keyword">if</span> (err) reject(err);
            <span class="hljs-keyword">else</span> resolve(stats);
        });
    });
}
</code></pre>
<h3 id="t547.5  test/loader.test.js">7.5  test/loader.test.js <a href="#t547.5  test/loader.test.js"> # </a></h3>
<pre><code class="lang-js"><span class="hljs-keyword">let</span> compile=<span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;./compile&apos;</span>);
test(<span class="hljs-string">&apos;replace name&apos;</span>,<span class="hljs-keyword">async</span> () =&gt; {
    <span class="hljs-keyword">const</span> stats=<span class="hljs-keyword">await</span> compile(<span class="hljs-string">&apos;example.txt&apos;</span>);
    <span class="hljs-keyword">const</span> data=stats.toJson();
    <span class="hljs-keyword">const</span> source=data.modules[<span class="hljs-number">0</span>].source;
    expect(source).toBe(<span class="hljs-string">`module.exports = &quot;hello Alice&quot;`</span>);
});
</code></pre>
<h3 id="t557.6  package.json">7.6  package.json <a href="#t557.6  package.json"> # </a></h3>
<pre><code class="lang-json">&quot;scripts&quot;: {
  &quot;test&quot;:&quot;jest&quot;
}
</code></pre>
<h2 id="t561. loader&#x6E90;&#x7801;">1. loader&#x6E90;&#x7801; <a href="#t561. loader&#x6E90;&#x7801;"> # </a></h2>
<p>loader&#x662F;&#x7528;&#x6765;&#x52A0;&#x8F7D;&#x5904;&#x7406;&#x5404;&#x79CD;&#x5F62;&#x5F0F;&#x7684;&#x8D44;&#x6E90;,&#x672C;&#x8D28;&#x4E0A;&#x662F;&#x4E00;&#x4E2A;&#x51FD;&#x6570;, &#x63A5;&#x53D7;&#x6587;&#x4EF6;&#x4F5C;&#x4E3A;&#x53C2;&#x6570;,&#x8FD4;&#x56DE;&#x8F6C;&#x5316;&#x540E;&#x7684;&#x7ED3;&#x6784;&#x3002;</p>
<ul>
<li>loader &#x7528;&#x4E8E;&#x5BF9;&#x6A21;&#x5757;&#x7684;&#x6E90;&#x4EE3;&#x7801;&#x8FDB;&#x884C;&#x8F6C;&#x6362;</li>
<li>loader &#x53EF;&#x4EE5;&#x4F7F;&#x4F60;&#x5728; import &#x6216;&quot;&#x52A0;&#x8F7D;&quot;&#x6A21;&#x5757;&#x65F6;&#x9884;&#x5904;&#x7406;&#x6587;&#x4EF6;</li>
</ul>
<h3 id="t571.1 NormalModuleFactory">1.1 NormalModuleFactory <a href="#t571.1 NormalModuleFactory"> # </a></h3>
<ul>
<li><code>!</code> noAutoLoaders &#x6240;&#x6709;&#x7684;loader&#x90FD;&#x4E0D;&#x8981;&#x6267;&#x884C;</li>
<li><code>!!</code> noPrePostAutoLoaders &#x4E0D;&#x8981;&#x524D;&#x540E;&#x7F6E;loader</li>
<li><code>-!</code> noPreAutoLoaders &#x4E0D;&#x8981;&#x524D;&#x7F6E;loader</li>
</ul>
<pre><code class="lang-js"><span class="hljs-keyword">this</span>.hooks.resolver.tap(<span class="hljs-string">&quot;NormalModuleFactory&quot;</span>, () =&gt; <span class="hljs-function">(<span class="hljs-params">data, callback</span>) =&gt;</span> {
            <span class="hljs-keyword">const</span> contextInfo = data.contextInfo;
            <span class="hljs-keyword">const</span> context = data.context;
            <span class="hljs-keyword">const</span> request = data.request;
            <span class="hljs-keyword">debugger</span> <span class="hljs-comment">/*resolve&#x94A9;&#x5B50;&#x4E0A;&#x6CE8;&#x518C;&#x7684;&#x65B9;&#x6CD5;&#x8F83;&#x957F;&#xFF0C;&#x5176;&#x4E2D;&#x8FD8;&#x5305;&#x62EC;&#x4E86;&#x6A21;&#x5757;&#x8D44;&#x6E90;&#x672C;&#x8EAB;&#x7684;&#x8DEF;&#x5F84;&#x89E3;&#x6790;&#x3002;resolver&#x6709;&#x4E24;&#x79CD;&#xFF0C;&#x5206;&#x522B;&#x662F;loaderResolver&#x548C;normalResolver&#x3002;*/</span>
            <span class="hljs-keyword">const</span> loaderResolver = <span class="hljs-keyword">this</span>.getResolver(<span class="hljs-string">&quot;loader&quot;</span>);
            <span class="hljs-keyword">const</span> normalResolver = <span class="hljs-keyword">this</span>.getResolver(<span class="hljs-string">&quot;normal&quot;</span>, data.resolveOptions);
            <span class="hljs-comment">//&#x5339;&#x914D;&#x7684;&#x8D44;&#x6E90;</span>
            <span class="hljs-keyword">let</span> matchResource = <span class="hljs-literal">undefined</span>;
            <span class="hljs-keyword">let</span> requestWithoutMatchResource = request;<span class="hljs-comment">//&#x8FD9;&#x662F;&#x539F;&#x59CB;&#x7684;&#x8BF7;&#x6C42;</span>
            <span class="hljs-keyword">const</span> matchResourceMatch = MATCH_RESOURCE_REGEX.exec(request);<span class="hljs-comment">//&quot;^([^!]+)!=!&quot;</span>
            <span class="hljs-keyword">if</span> (matchResourceMatch) {<span class="hljs-comment">//&#x5982;&#x679C;&#x80FD;&#x5339;&#x914D;&#x4E0A;</span>
                matchResource = matchResourceMatch[<span class="hljs-number">1</span>];<span class="hljs-comment">//&#x53D6;&#x5F97;&#x5339;&#x914D;&#x5230;&#x7684;&#x8D44;&#x6E90; </span>
                <span class="hljs-keyword">if</span> (<span class="hljs-regexp">/^\.\.?\//</span>.test(matchResource)) {<span class="hljs-comment">//&#x5982;&#x679C;&#x662F;&#x4E00;&#x4E2A;&#x76F8;&#x5BF9;&#x8DEF;&#x5F84;,&#x5219;&#x8F6C;&#x6210;&#x7EDD;&#x5BF9;&#x8DEF;&#x5F84;</span>
                    matchResource = path.join(context, matchResource);
                }<span class="hljs-comment">//&#x628A;&#x5339;&#x914D;&#x5230;&#x7684;&#x90E8;&#x5206;&#x622A;&#x53D6;&#x6389;</span>
                requestWithoutMatchResource = request.substr(
                    matchResourceMatch[<span class="hljs-number">0</span>].length
                );
            }
            <span class="hljs-keyword">debugger</span> <span class="hljs-comment">/*noPreAuto&#x6307;&#x7684;&#x662F;&#x53EA;&#x7528;&#x884C;&#x5185;loader,&#x7981;&#x7528;&#x914D;&#x7F6E;&#x6587;&#x4EF6;&#x4E2D;&#x7684;loader&#x914D;&#x7F6E;*/</span>
            <span class="hljs-keyword">const</span> noPreAutoLoaders = requestWithoutMatchResource.startsWith(<span class="hljs-string">&quot;-!&quot;</span>);
            <span class="hljs-keyword">const</span> noAutoLoaders =
                noPreAutoLoaders || requestWithoutMatchResource.startsWith(<span class="hljs-string">&quot;!&quot;</span>);<span class="hljs-comment">//!&#x8868;&#x793A;&#x4E0D;&#x8D70;&#x914D;&#x7F6E;</span>
            <span class="hljs-keyword">const</span> noPrePostAutoLoaders = requestWithoutMatchResource.startsWith(<span class="hljs-string">&quot;!!&quot;</span>);<span class="hljs-comment">//&#x8868;&#x793A;&#x7981;&#x7528;&#x524D;&#x540E;loader</span>
            <span class="hljs-keyword">let</span> elements = requestWithoutMatchResource
                .replace(<span class="hljs-regexp">/^-?!+/</span>, <span class="hljs-string">&quot;&quot;</span>)<span class="hljs-comment">//&#x628A;-!&#x66FF;&#x6362;&#x6210;&#x7A7A;</span>
                .replace(<span class="hljs-regexp">/!!+/g</span>, <span class="hljs-string">&quot;!&quot;</span>)<span class="hljs-comment">//&#x628A;!!&#x66FF;&#x6362;&#x6210;&#x4E00;&#x4E2A;!</span>
                .split(<span class="hljs-string">&quot;!&quot;</span>); <span class="hljs-keyword">debugger</span> <span class="hljs-comment">/*webpack&#x4F1A;&#x4ECE;request&#x4E2D;&#x89E3;&#x6790;&#x51FA;&#x6240;&#x9700;&#x7684;loader,&#x5305;&#x62EC;&#x8D44;&#x6E90;&#x672C;&#x8EAB; */</span>
            <span class="hljs-keyword">let</span> resource = elements.pop();<span class="hljs-comment">//&#x53D6;&#x5F97;&#x8D44;&#x6E90;</span>
            elements = elements.map(identToLoaderRequest);<span class="hljs-comment">//&#x5269;&#x4E0B;&#x7684;&#x5168;&#x8F6C;&#x6210;loader&#x5BF9;&#x8C61;</span>

</code></pre>
<h3 id="t581.2  webpack/lib/NormalModule.js:263">1.2  webpack/lib/NormalModule.js:263 <a href="#t581.2  webpack/lib/NormalModule.js:263"> # </a></h3>
<pre><code class="lang-js">runLoaders({
                <span class="hljs-attr">resource</span>: <span class="hljs-keyword">this</span>.resource,
                <span class="hljs-attr">loaders</span>: <span class="hljs-keyword">this</span>.loaders,
                <span class="hljs-attr">context</span>: loaderContext
},
(err, result) =&gt; {
<span class="hljs-keyword">const</span> resourceBuffer = result.resourceBuffer;
<span class="hljs-keyword">const</span> source = result.result[<span class="hljs-number">0</span>];
<span class="hljs-keyword">const</span> sourceMap = result.result.length &gt;= <span class="hljs-number">1</span> ? result.result[<span class="hljs-number">1</span>] : <span class="hljs-literal">null</span>;
<span class="hljs-keyword">const</span> extraInfo = result.result.length &gt;= <span class="hljs-number">2</span> ? result.result[<span class="hljs-number">2</span>] : <span class="hljs-literal">null</span>;<span class="hljs-comment">//ast</span>
<span class="hljs-keyword">this</span>._source = <span class="hljs-keyword">this</span>.createSource(
                    <span class="hljs-keyword">this</span>.binary ? asBuffer(source) : asString(source),
                    resourceBuffer,
                    sourceMap
);
<span class="hljs-keyword">this</span>._ast = <span class="hljs-keyword">typeof</span> extraInfo === <span class="hljs-string">&quot;object&quot;</span> &amp;&amp;
                    extraInfo !== <span class="hljs-literal">null</span> &amp;&amp;
                    extraInfo.webpackAST !== <span class="hljs-literal">undefined</span>? extraInfo.webpackAST: <span class="hljs-literal">null</span>;
} 
</code></pre>
<h3 id="t591.3  LoaderRunner.js">1.3  LoaderRunner.js <a href="#t591.3  LoaderRunner.js"> # </a></h3>
<p>loader-runner/lib/LoaderRunner.js</p>
<pre><code class="lang-js">iteratePitchingLoaders(processOptions, loaderContext, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">err, result</span>) </span>{
callback(<span class="hljs-literal">null</span>, {
            <span class="hljs-attr">result</span>: result,<span class="hljs-comment">//&#x7ED3;&#x679C;</span>
            resourceBuffer: processOptions.resourceBuffer,
            <span class="hljs-attr">cacheable</span>: requestCacheable,
            <span class="hljs-attr">fileDependencies</span>: fileDependencies,
            <span class="hljs-attr">contextDependencies</span>: contextDependencies
});
}
</code></pre>
<h3 id="t601.4 LoaderRunner.js:155">1.4 LoaderRunner.js:155 <a href="#t601.4 LoaderRunner.js:155"> # </a></h3>
<pre><code class="lang-js"><span class="hljs-keyword">if</span>(loaderContext.loaderIndex &gt;= loaderContext.loaders.length)
        <span class="hljs-keyword">return</span> processResource(options, loaderContext, callback);
<span class="hljs-keyword">var</span> fn = currentLoaderObject.pitch;

runSyncOrAsync(fn,loaderContext);

<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">runSyncOrAsync</span>(<span class="hljs-params">fn, context, args, callback</span>) </span>{
    <span class="hljs-keyword">var</span> isSync = <span class="hljs-literal">true</span>;
    <span class="hljs-keyword">var</span> isDone = <span class="hljs-literal">false</span>;
    <span class="hljs-keyword">var</span> isError = <span class="hljs-literal">false</span>; <span class="hljs-comment">// internal error</span>
    <span class="hljs-keyword">var</span> reportedError = <span class="hljs-literal">false</span>;
    context.async = <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">async</span>(<span class="hljs-params"></span>) </span>{
        <span class="hljs-keyword">if</span> (isDone) {
            <span class="hljs-keyword">if</span> (reportedError) <span class="hljs-keyword">return</span>; <span class="hljs-comment">// ignore</span>
            <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-built_in">Error</span>(<span class="hljs-string">&quot;async(): The callback was already called.&quot;</span>);
        }
        isSync = <span class="hljs-literal">false</span>;
        <span class="hljs-keyword">return</span> innerCallback;
    };
    <span class="hljs-keyword">var</span> innerCallback = context.callback = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
        <span class="hljs-keyword">if</span> (isDone) {
            <span class="hljs-keyword">if</span> (reportedError) <span class="hljs-keyword">return</span>; <span class="hljs-comment">// ignore</span>
            <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-built_in">Error</span>(<span class="hljs-string">&quot;callback(): The callback was already called.&quot;</span>);
        }
        isDone = <span class="hljs-literal">true</span>;
        isSync = <span class="hljs-literal">false</span>;
        <span class="hljs-keyword">try</span> {
            callback.apply(<span class="hljs-literal">null</span>, <span class="hljs-built_in">arguments</span>);
        } <span class="hljs-keyword">catch</span> (e) {
            isError = <span class="hljs-literal">true</span>;
            <span class="hljs-keyword">throw</span> e;
        }
    };
    <span class="hljs-keyword">try</span> {
        <span class="hljs-keyword">var</span> result = (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">LOADER_EXECUTION</span>(<span class="hljs-params"></span>) </span>{
            <span class="hljs-keyword">return</span> fn.apply(context, args);
        }());
        <span class="hljs-keyword">if</span> (isSync) {
            isDone = <span class="hljs-literal">true</span>;
            <span class="hljs-keyword">if</span> (result === <span class="hljs-literal">undefined</span>)
                <span class="hljs-keyword">return</span> callback();
            <span class="hljs-keyword">if</span> (result &amp;&amp; <span class="hljs-keyword">typeof</span> result === <span class="hljs-string">&quot;object&quot;</span> &amp;&amp; <span class="hljs-keyword">typeof</span> result.then === <span class="hljs-string">&quot;function&quot;</span>) {
                <span class="hljs-keyword">return</span> result.catch(callback).then(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">r</span>) </span>{
                    callback(<span class="hljs-literal">null</span>, r);
                });
            }
            <span class="hljs-keyword">return</span> callback(<span class="hljs-literal">null</span>, result);
        }
    } <span class="hljs-keyword">catch</span> (e) {
        <span class="hljs-keyword">if</span> (isError) <span class="hljs-keyword">throw</span> e;
        <span class="hljs-keyword">if</span> (isDone) {
            <span class="hljs-comment">// loader is already &quot;done&quot;, so we cannot use the callback function</span>
            <span class="hljs-comment">// for better debugging we print the error on the console</span>
            <span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> e === <span class="hljs-string">&quot;object&quot;</span> &amp;&amp; e.stack) <span class="hljs-built_in">console</span>.error(e.stack);
            <span class="hljs-keyword">else</span> <span class="hljs-built_in">console</span>.error(e);
            <span class="hljs-keyword">return</span>;
        }
        isDone = <span class="hljs-literal">true</span>;
        reportedError = <span class="hljs-literal">true</span>;
        callback(e);
    }

}
</code></pre>
<pre><code class="lang-js"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">runSyncOrAsync</span>(<span class="hljs-params">fn, context, callback</span>) </span>{
    <span class="hljs-keyword">var</span> isSync = <span class="hljs-literal">true</span>;
    context.callback = callback;
    context.async = <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">async</span>(<span class="hljs-params"></span>) </span>{
        isSync = <span class="hljs-literal">false</span>;
        <span class="hljs-keyword">return</span> context.callback;
    };

    <span class="hljs-keyword">var</span> result = fn.apply(context);
    <span class="hljs-keyword">if</span> (isSync) {
        <span class="hljs-keyword">return</span> callback(<span class="hljs-literal">null</span>, result);
    }
}

<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">say</span>(<span class="hljs-params"></span>) </span>{
    <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.name;
}
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">say2</span>(<span class="hljs-params"></span>) </span>{
    <span class="hljs-keyword">let</span> cb = <span class="hljs-keyword">this</span>.async();
    cb(<span class="hljs-literal">null</span>);
}
<span class="hljs-keyword">let</span> context = { <span class="hljs-attr">name</span>: <span class="hljs-string">&apos;zfpx&apos;</span> };
runSyncOrAsync(say2, context, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&apos;over&apos;</span>);
});
</code></pre>
<h3 id="t611.5 loadLoader.js:13">1.5 loadLoader.js:13 <a href="#t611.5 loadLoader.js:13"> # </a></h3>
<p>loader-runner/lib/loadLoader.js:13</p>
<pre><code class="lang-js"><span class="hljs-keyword">var</span> <span class="hljs-built_in">module</span> = <span class="hljs-built_in">require</span>(loader.path);
loader.normal = <span class="hljs-keyword">typeof</span> <span class="hljs-built_in">module</span> === <span class="hljs-string">&quot;function&quot;</span> ? <span class="hljs-built_in">module</span> : <span class="hljs-built_in">module</span>.default;
loader.pitch = <span class="hljs-built_in">module</span>.pitch;
loader.raw = <span class="hljs-built_in">module</span>.raw;
</code></pre>
<h3 id="t621.6 LoaderRunner.js">1.6 LoaderRunner.js <a href="#t621.6 LoaderRunner.js"> # </a></h3>
<p>loader-runner/lib/LoaderRunner.js</p>
<pre><code class="lang-js">runSyncOrAsync(
            fn,
            loaderContext, [loaderContext.remainingRequest, loaderContext.previousRequest, currentLoaderObject.data = {}],
            <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">err</span>) </span>{
                <span class="hljs-keyword">if</span>(err) <span class="hljs-keyword">return</span> callback(err);
                <span class="hljs-keyword">var</span> args = <span class="hljs-built_in">Array</span>.prototype.slice.call(<span class="hljs-built_in">arguments</span>, <span class="hljs-number">1</span>);
                <span class="hljs-keyword">if</span>(args.length &gt; <span class="hljs-number">0</span>) {
                    loaderContext.loaderIndex--;
                    iterateNormalLoaders(options, loaderContext, args, callback);
                } <span class="hljs-keyword">else</span> {
                    iteratePitchingLoaders(options, loaderContext, callback);
                }
            }
        );
</code></pre>
<h2 id="t63&#x53C2;&#x8003;">&#x53C2;&#x8003; <a href="#t63&#x53C2;&#x8003;"> # </a></h2>
<ul>
<li><a href="https://github.com/webpack/loader-utils">loader-utils</a></li>
<li><a href="https://github.com/webpack-contrib/schema-utils">schema-utils</a></li>
</ul>

        <div class="copyright">Powered by <a href="https://github.com/jaywcjlove/idoc" target="_blank">idoc</a>. Dependence <a href="https://nodejs.org">Node.js</a> run.</div>
    </div>
    
</div>

<script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.js"></script>
<script>
$('.warpper .page-toc ul ul li a').on('click',function(){
  $('.warpper .page-toc ul ul li a').removeClass('my-active')
  $(this).addClass('my-active')
})
  // if (!$('.understand-me').length) {
  //   var bar = $(window).height() - $('.navbar ').height() - $('.page-toc').position().top;
  //   var count = bar / 26 / 2;
  //   var barHeight = $('.page-toc').outerHeight();
  //   $('.page-toc li').eq(0).children('a').addClass('red');
  //   var arr = [];
  //   $("h1,h2,h3,h4,h5,h6").each(function () {
  //     arr.push($(this).position().top);
  //   });
  //   var timer
  //   function dark() {
  //     clearTimeout(timer)
  //      timer = setTimeout(function () {
  //      var top = Math.abs($('.page-toc > ul').position().top);
  //      var cur = $('.content').scrollTop();
  //      for (var i = arr.length; i >= 0; i--) {
  //        if (arr[i] <= cur) {
  //          break;
  //        }
  //      }
  //      if (i === -1) {
  //        i = 0;
  //      }
  //      $('.page-toc li a').removeClass('red');
  //      $('.page-toc li').eq(i).children('a').addClass('red');
  //      let height = $('.page-toc li').eq(i).position().top-$('.page-toc').height(); // 如果当前的offset出去了 回到中间可好？
  //      $('.page-toc').scrollTop(height+$('.page-toc').height()/2);
  //    },200)
  //   }

  //   $('.content').on('scroll', dark);
  // }
</script>
<style>

    /* ::-webkit-scrollbar{width:14px;}
    ::-webkit-scrollbar-track{background-color:transparent;}
    ::-webkit-scrollbar-thumb{background-color:transparent;}
    ::-webkit-scrollbar-thumb:hover {background-color:transparent}
    ::-webkit-scrollbar-thumb:active {background-color:transparent} */

    .page-toc > ul .red {
        background: #f3f3f3;
        z-index: 1;
        border-left: 3px solid #009a61;
        -webkit-transition: all .2s ease;
        transition: all .2s ease;
        color: #000
    }





</style>
</body>
</html>
